內容提要

• 變量
• 嵌套
• 占位符選擇器 %
• @mixin
• 運算
• @if
• @for
• @each
• @extend
• @import

正文

1、變量

//定義變量：聲明變量以$開
$baseColor:#ff9000;
//使用變量
.box{
    font-size:12px;
    color:$baseColor;
}

//若變量需要鑲嵌在字符串中，變量寫在#{$el}中
//如：margin-#{$el}:10px;  //.box#{$el} {...}

$bgURL:‘../../../img/work/‘;
.box {
    background-image: url(#{$bgURL}crumbs.png);
}
 

變量支持塊級作用域，嵌套規則內定義的變量只能在嵌套規則內使用（局部變量），不在嵌套規則內定義的變量則可在任何地方使用（全局變量）。將局部變量轉換為全局變量可以添加!global 聲明：

#main {
    $width: 5em !global;
    width: $width;
}

#sidebar {
    width: $width;     //5em
}

可以在變量的結尾添加!default給一個未通過 !default 聲明賦值的變量賦值，此時，如果變量已經被賦值，不會再被重新賦值，但是如果變量還沒有被賦值，則會被賦予新的值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

//編譯為

#main {
  content: "First content";
  new-content: "First time reference"; }
 

2、嵌套

• 選擇器嵌套

使用嵌套增強了結構性和可讀性，可以用&表示父選擇器（臨近的最外層）。嵌套建議不超過3層以上；

.box{
    color:red;
    &:hover{          //相當於.box:hover{}
        color:blue;
    }
}

//& 必須作為選擇器的第一個字符，其後可以跟隨後綴生成復合的選擇器
#main {
    color: black;
    &-sidebar {                   //相當於 #main-sidebar {}
       border: 1px solid; 
    }   
}

 

• 屬性嵌套

有些屬性擁有同一個開始的單詞，如：

.box{
  border:{
    color:red;
    width:1px;
    style:solid;
  }
}

//編譯為
.box{
    border-color:red;
    border-width:1px;
    border-style:solid;
}

3、占位符選擇器 %

與常用的 id 與 class 選擇器寫法相似，只是 # 或 . 替換成了 %。必須通過 @extend 指令調用。

優勢：不調用時不會有多余的css文件。

%fl{
    float:left;
}
.box{
    @extend %fl;
}

4、@mixin

//定義
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
//使用
p { @include sexy-border(blue, 1px); }

//編譯為
p {
  border-color: blue;
  border-width: 1px;
  border-style: dashed; }

//也可使用參數個默認值

@mixin sexy-border($color, $width: 1px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2px); }
  

為便於書寫，@mixin 可以用 = 表示，而 @include 可以用 + 表示

5、運算

• 數字運算

SassScript 支持數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。

關系運算 <, >, <=, >= 也可用於數字運算，相等運算 ==, != 可用於所有數據類型。

• 字符串運算

+ 可用於連接字符串

註意，如果有引號字符串（位於 + 左側）連接無引號字符串，運算結果是有引號的，相反，無引號字符串（位於 + 左側）連接有引號字符串，運算結果則沒有引號。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
//編譯為
p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}

如果需要使用變量，同時又要確保 / 不做除法運算而是完整地編譯到 CSS 文件中，只需要用 #{} 插值語句將變量包裹。

6、@if

當 @if 的表達式返回值不是 false 或者 null 時，條件成立，輸出 {} 內的代碼：

$type: 3;
p {
  @if $type == 1 {
    color: blue;
  } @else if $type == 2 {
    color: red;
  } @else if $type == 3 {
    color: green;
  } @else {
    color: black;
  }
}
//結果
p { color: green; }

@if 聲明後面可以跟多個 @else if 聲明，或者一個 @else 聲明。

7、@for

@for 指令可以在限制的範圍內重復輸出格式，每次按要求（變量的值）對輸出結果做出變動。這個指令包含兩種格式：@for $var from <start> through <end>，或者@for $var from <start> to <end>，區別在於 through 與 to 的含義：當使用 through 時，條件範圍包含 <start> 與 <end> 的值，而使用 to 時條件範圍只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何變量，比如 $i；。

@for $i from 1 through 3 {                  //1-3
  .item-#{$i} { width: 2em * $i; }
}


@for $i from 1 to 3 {                  //1-2
  .item-#{$i} { width: 2em * $i; }
}

8、@each

@each 指令的格式是 $var in <list>, $var 可以是任何變量名，比如 $length 或者 $name，而

//數組   list類型
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url(‘/images/#{$animal}.png‘);
  }
}

.puma-icon {
  background-image: url(‘/images/puma.png‘); }
.sea-slug-icon {
  background-image: url(‘/images/sea-slug.png‘); }
.egret-icon {
  background-image: url(‘/images/egret.png‘); }
.salamander-icon {
  background-image: url(‘/images/salamander.png‘); }



//對象   maps類型
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

nth 函數可以直接訪問數組中的某一項；join 函數可以將多個數組連接在一起；append 函數可以在數組中添加新值；

9、@extend

功能：將一個選擇器下的所有樣式繼承給另一個選擇器。

.fl{
    float:left;
}
.box{
    width:200px;
    @extend .fl;
}
//編譯為
.box{
    width:200px;
}
.fl,.box{
    float:left;
}

10、@import

Sass 拓展了 @import 的功能，允許其導入 SCSS 或 Sass 文件。被導入的文件將合並編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。

通常，@import 尋找 Sass 文件並將其導入，但在以下情況下，@import 僅作為普通的 CSS 語句，不會導入任何 Sass 文件。

• 文件拓展名是 .css；
• 文件名以 http:// 開頭；
• 文件名是 url()；
• @import 包含 media queries。

Sass 允許同時導入多個文件，例如同時導入base1 與 base2 兩個文件：

@import "base1", "base2";

大多數情況下，一般在文件的最外層（不在嵌套規則內）使用 @import，其實，也可以將 @import 嵌套進 CSS 樣式或者 @media 中，與平時的用法效果相同，只是這樣導入的樣式只能出現在嵌套的層中。

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

以上是對開發中常用sass的一些總結，更詳細內容可移步 sass中文文檔。

sass使用參考文檔