Sass

Sass與Scss的異同

sass與scss基本是相同的，惟一的不一樣是，須要使用分號和花括號而不是換行和縮進。

// sass 寫法
#header{
  width: 30%;
  background-color: red;
}

// scss寫法
#header
  width: 30%
  background-color: red

變量

$red: red;
div{
  color: $red
}

$side: top;
div{
  padding-#{$side}: 10px;
}

計算功能

div{
  margin: (20px/2);
  padding: 5px + 2px;
  width: 10 * 10%
}

嵌套

div{
  p{
    color: red;
  }
}

編譯爲

div p{
  color: red;
}

---

div{
  border:{
    width: 1px;
    color: #ccc;
    style: solid;
  }
}

注意border後面的冒號!!!

編譯爲

div{
  border-width: 1px;
  border-color: #cccccc;
  border-style: solid;
}

---

// 在嵌套的代碼塊內，能夠使用&引用父元素
div{
  &:hover{
    background: red
  }
}

註釋

• 標準的CSS註釋 /* comment */ ，會保留到編譯後的文件。
• 單行註釋 // comment，只保留在SASS源文件中，編譯後被省略。
• 在/*後面加一個感嘆號，表示這是"重要註釋"。即便是壓縮模式編譯，也會保留這行註釋，一般能夠用於聲明版權信息。

/*! 
  重要註釋！
*/

繼承

.box1{
  border: 1px solid #ddd;
}

box2要繼承box1，就要使用@extend命令

.box2 {
  @extend .box1;
　font-size: 12px;
}

Mixin

重用的代碼塊

@mixin left {
  float: left;
  margin-left: 10px;
}

使用@include命令，調用這個mixin

div{
  @include left;
}

強大之處

@mixin left($value: 10px) {
  float: left;
　margin-right: $value;
}

div{
  @include left(20px);
}

顏色函數

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

條件語句

// @if能夠用來判斷

p{
  @if 1 + 1 == 2 { border: 1px solid; }
　@if 5 < 3 { border: 2px dotted; }
}

// 配套的還有@else命令

@if lightness($color) > 30% {
  background-color: #000;
} @else {
　background-color: #fff;
}

循環語句

// sass支持for循環

@for $i from 1 to 10 {
　.border-#{$i} {
　　 border: #{$i}px solid blue;
　}
}

// 固然也支持while循環

$i: 6;

@while $i > 0 {
　.item-#{$i} { width: 2em * $i; }
　$i: $i - 2;
}

// each命令，做用與for相似

@each $member in a, b, c, d {
　.#{$member} {
　　background-image: url("/image/#{$member}.jpg");
　}
}

自定義函數

// SASS容許用戶編寫本身的函數

@function double($n) {
　@return $n * 2;
}

#sidebar {
　width: double(5px);
}