一、基本使用

1. 使用變量$

先說明下載css中定義變量的寫法

:root {
  --color:#f00;
}
body {
  --border-color:#f2f2f2;
}
.header {
  --background-color:#f8f8f8;
}

p {
  color: var(--color);
  border-color: var(--border-color);
} 
.header {
  background-color: var(--background-color);
}

在scss中定義變量有如下規則：

• 變量名以美元 $ 開頭，后面跟變量名；
• 變量名是不以數字開頭的可包含字母、數字、下劃線、橫線（連接符）；
• 寫法同 css，即變量名與值之間用 : 分隔；
• 變量一定要先定義，后使用；

注意，在定義變量時，$font-B和$font_B是一樣的含義，寫在后面的會覆蓋前面的變量。可用于配置顏色、字體，或全局配置圖片路徑等。

2. 默認變量值 !default

!default 可以給變量賦予默認值。該變量假如已經賦值，那么它不會被重新賦值，但是，如果它尚未賦值，那么它會被賦予新的給定值。

3. 局部變量和全局變量

局部變量： 在選擇器內定義的變量，只能在選擇器范圍內使用，相當于塊作用域；
全局變量：定義后能全局使用的變量，有兩種定義方式，一種是在選擇器外面的最前面定義的變量；另一種是使用 !global 標志定義全局變量。

4. 變量值類型

變量值的類型可以有很多種，SASS支持7種主要的數據類型：

• 數字 (例如： 1.2, 13, 10px)
• 文本字符串，帶引號字符串和不帶引號字符串(例如："foo", 'bar', baz)
• 顏色 (例如：blue, #04a3f9, rgba(255, 0, 0, 0.5))
• 布爾值 (例如： true, false)
• 空值 (例如： null)
• 值列表 (list)，用空格或逗號分隔 (例如： 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
• maps ，從一個值映射到另一個 (例如： (key1: value1, key2: value2))

注意，用 () 表示不包含任何值的空數組（在 Sass 3.3 版之后也視為空的 map）

$layer-index:10;
$border-width:3px;
$font-base-family:'Open Sans', Helvetica, Sans-Serif;
$top-bg-color:rgba(255,147,29,0.6);
$block-base-padding:6px 10px 6px 10px;
$blank-mode:true;
$var:null; // 值null是其類型的唯一值。它表示缺少值，通常由函數返回以指示缺少結果。
$color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb);

$fonts: (serif: "Helvetica Neue",monospace: "Consolas");

5. 語法嵌套規則

選擇器嵌套

Sass 允許將一個 CSS 樣式嵌套進另一個樣式中，內層樣式僅適用于外層樣式的選擇器范圍內（可以理解為層級選擇器），這有助于避免父選擇器重復，相對于復雜的CSS布局中多層嵌套的選擇器 要簡單得多，例如

#main p {
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
} 

父選擇器 &

有些時候需要直接使用嵌套外層的父選擇器，這個就很有用了，例如，你可能喜歡給選擇器指定 hover樣式，或者當body元素具有某個樣式時，在這些情況下，你可以 & 字符來明確地表示插入指定父選擇器。 例如：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
} 

& 必須出現在的選擇器的開頭位置（也就是作為選擇器的第一個字符），但可以跟隨后綴，將被添加到父選擇的后面。 例如：

#main {
  color: black;
  &-sidebar { border: 1px solid; }
} 

注意，父選擇器 & 被作為一個后綴的時候，Sass 將拋出一個錯誤。

嵌套屬性

CSS中有一些屬性遵循相同的“命名空間”；比如，font-family, font-size, 和 font-weight都在font命名空間中。在CSS中，如果你想在同一個命名空間中設置一串屬性，你必須每次都輸出來。Sass為此提供了一個快捷方式：只需要輸入一次命名空間，然后在其內部嵌套子屬性。例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
} 

命名空間也可以有自己的屬性值。例如：

// scss
.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
} 
// 編譯為
.funky {
  font: 20px/24px fatasy;
  font-weight: bold;
}

補充，font 屬性的定義
font 屬性是（按順序）： "font-style font-variant font-weight font-size/line-height font-family"，font-size 和 font-family 的值是必需的。如果缺少了其他值，默認值將被插入，如果有默認值的話。

占位符選擇器 %xxx

有時，需要定義一套樣式并不是給某個元素用，而是只通過 @extend 指令使用，尤其是在制作 Sass 樣式庫的時候，希望 Sass 能夠忽略用不到的樣式。例如：

.button%base {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    font-size: 14px;
    // ...
    user-select: none;
}

如果沒有通過@extend指令使用這個樣式，這個樣式在編譯成css時是會被忽略的。
通過 @extend 指令使用

// scss
.btn-default {
    @extend %base;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-success {
    @extend %base;
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
// 編譯為
.button.btn-danger, .button.btn-success {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    font-size: 14px;
    // ...
    user-select: none;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

6. 注釋

Sass支持兩種注釋

• 標準的css多行注釋 /* ... */ 會編譯到.css文件中
• 單行注釋 // 不會編譯到.css文件

7. SASS導入@import

@import

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

// public.scss
$font-base-color: #333;

// index.scss
@import "public"
.container {
  color: $font-base-color;
}

如下幾種方式，都將作為普通的css語句，不會導入任何sass文件

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

@import "public.css";
@import url(public);
@import "http://xxx.com/xxx";
@import 'landscape' screen and (orientation:landscape);

局部文件

Sass源文件中可以通過@import指令導入其他Sass源文件，被導入的文件就是局部文件，局部文件讓Sass模塊化編寫更加容易。
如果一個目錄正在被Sass程序監測，目錄下的所有scss/sass源文件都會被編譯，但通常不希望局部文件被編譯，因為局部文件是用來被導入到其他文件的。如果不想局部文件被編譯，文件名可以以下劃線 （_）開頭

嵌套 @import

雖然在大部分情況下，一般都是在文檔的頂層使用 @import，但是也可以在CSS 規則和@media 規則中包含@import語句。就像一個基層的 @import ，這里會包含 @import 導入文件的內容。但是，只是這樣導入的樣式只能出現在嵌套的層中。例如

// _base.scss
.example {
  color: red;
} 
// index.scss
.container {
  @import "example";
}

// 編譯為
.container .example {
  color: red;
} 

注意：@import不能使用在控制指令或混入中。

二、指令

1. 混合指令 (@mixin)

混入(mixin)允許您定義可以在整個樣式表中重復使用的樣式，而避免了使用無語意的類（class），比如 .float-left。混入(mixin)還可以包含所有的CSS規則，以及任何其他在Sass文檔中被允許使用的東西。
他們甚至可以帶arguments，引入變量，只需少量的混入(mixin)代碼就能輸出多樣化的樣式。

基礎定義與使用

混入(mixin)通過 @mixin 指令定義。在它后面跟混入的名稱和任選的arguments，以及混入的內容塊。例如，large-text混入定義如下：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
} 

混入也可以包含選擇器和屬性的混合體，選擇器中甚至可以包含父選擇器。例如：

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
} 

注意，由于歷史原因，混入（mixin）的名字（和所有其他 Sass 標識符）可以互換連字符和下劃線。例如，如果你定義了一個名為add-column的混入，你可以把它作為add_column，反之亦然。

使用 @include 指令可以將混入（mixin）引入到文檔中。這需要一個混入的名稱和可選的參數傳遞給它，并包括由混入定義的當前規則的樣式。 例如：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
} 

混入（mixin）定義也可以包含其他的混入。例如：

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; } 
@mixin compound {
  @include highlighted-background;
  @include header-text;
}

帶參數混入

混入可以用SassScript 值作為參數，給定的參數被包括在混入中并且作為變量提供給混入。
當定義一個混入（mixin）的時候，參數被作為變量名，寫到混入（mixin）名字后面的括號內，多個參數可以用逗號分隔。然后，當調用混入的時候，值通過對應的參數順序被傳遞。 例如

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p {
  @include sexy-border(blue, 1in);
}

當然也可以給參數賦默認值 ($color, $width: 1in)

如果在使用 @include 指令時明確使用關鍵字參數，那么命名的參數可以按照任意順序傳遞

h1 { @include sexy-border( $width: 2in, $color: blue ); } 

如果不確定參數個數的話，可以使用可變參數來定義參數，參數看起來就像普通參數一樣，但后面跟隨著...。例如：

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
} 

混入樣式中使用插槽

在引用混合樣式的時候，可以先將一段代碼帶入到混合指令中，然后再輸出混合樣式，額外導入的部分將 @content 標志占位：

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}
// 編譯為
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

總結

• mixin是可以重復使用的一組CSS聲明
• mixin有助于減少重復代碼，只需聲明一次，就可在文件中引用
• 混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則，甚至通過參數功能引入變量，輸出多樣化的樣式。
• 使用參數時建議加上默認值

2. 函數指令(@function)

Sass 支持自定義函數，并能在任何值或腳本上下文中使用。例如：

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }

// 編譯后
#sidebar { width: 240px; }

函數可以訪問任何全局定義的變量，以及接受參數，就像一個混入。函數可以包含語句，并且你必須調用@return 來設置函數的返回值。當然，可以像關鍵字混入一樣，傳入參數名來調用函數，也支持可變參數。

3. 繼承指令 (@extend)

在沒有繼承指令前，以警告框為例，通常會在HTML中定義兩個class，一個是通用警告框樣式，一個是不同顏色的警告框樣式

使用繼承@extend改進

可以使用 @extend 繼承通用樣式，使用時就無需在html中寫兩個class了

.alert{
    padding: 15px;
    // ...
    border: 1px solid transparent;
}
.alert-info {
    @extend .alert;
    color: #31708f;
    // ...
}
.alert-success {
    @extend .alert;
    color: #3c763d;
    // ...
}

使用多個@extend

當然可以使用多個 @extend

.alert-success {
    @extend .alert;
    @extend .important;
    color: #3c763d;
    // ...
}

@extend多層繼承

一個選擇器可以擴展另一個選擇器，另一個選擇器又擴展的第三選擇器選擇。 例如:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
} 

占位符%

被繼承的css父類并沒有被實際應用，對于該類，可能不希望被編譯輸出到最終的css文件中，它只會增加CSS文件的大小，永遠不會被使用。
這時候可以使用占位符%，在Sass文件中使用占位符選擇器時，它可以用于擴展其他選擇器，但不會被編譯成最終的CSS。

%alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
.alert-info {
    @extend %alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

4. @use指令

@use 可以從其他 sass 樣式表加載 mixin， funcition 和變量，并將來自多個樣式表的css組合在一起。
通過 @use "module" 使用模塊時，可以不需要寫擴展名，程序會自動查找。
語法：@use "Address" as spacename;
Adress: scss 文件路徑
spacename：命名空間（防止加載多個文件導致引用混淆）

@use "_base.scss" as base;
.button {
  @include base.borderColor;
  color: base.$color;
}

重要的是，通過@use 加載的模塊不管被引用多少次，都會在編譯后輸出一次到css中。但使用@import多次引入同一模塊，會反復輸出到css中。

注意，@use的前面只能出現@forward或變量聲明，其它的所有代碼只能出現在 @use 之后。

5. @forward指令

當使用@use加載文件A時，當前文件中可以使用@forward來使A文件中的 mixin，函數和變量可以暴露出去。通常用于跨多個文件組織 sass 庫。
通過 @forward 加載一個模塊的成員，這些成員并不能在當前文件內訪問，而僅僅是將這些成員當作自己的成員對外暴露出去。例如：

//a.scss
$color:red;
.a{
    color: $color;
    font-size: 16px;
}
//b.scss
@forward 'a.scss'; // 轉發a中的變量，并引入普通樣式代碼
.b{
    // 雖然沒有使用 @use 不能訪問模塊 a.scss 的變量，但可以繼承它的樣式
    @extend .a;
    // 如果寫 color: a.$red 會報錯，因為沒有使用 @use "a.scss"
}
//css.scss
@use 'b.scss';
.index{
    @extend .a;
    background-color: b.$color;
}

通過 @forward "module" as xxx-* 可以給同一個模塊中的成員統一添加前綴。
假設有 a.scss， b.scss， c.scss 三個模塊中都有一個名叫 $color 的變量：

// bus.scss
@forward 'a.scss' as a-*;
@forward 'b.scss' as b-*;
@forward 'c.scss' as c-*;

// index.scss
@use 'bus.scss';

.index {
  background-color: bus.$a-color;
  color: bus.$b-color;
  border: 1px solid bus.$c-color;

在轉發其他模塊的成員時，可以對成員進行配置，修改默認值，或者指定一個確定的值均可。

// a.scss
$red: #f00 !default;
$black: #000 !default;
$green: #0f0 !default;

// b.scss
// 轉發成員時進行配置，修改默認值，或修改為固定的值
@forward 'a.scss' with (
  $red: #f55 !default,
  $black: #333,
);

// index.scss
@use 'b.scss' with (
  $red: #f11,
);

.div {
  color: b.$red;                // #f11
  background-color: b.$black;   // #333
  border-color: b.$green;       // #0f0
}

默認情況下，@forward 會將一個模塊中所有成員都轉發，如果只想轉發某些成員，或不想轉發某些成員，可以這樣書寫：

• @forward "module" hide $var, mixinName, fnName 禁止轉發某些成員
• @forward "module" show $var, mixinName, fnName 只轉發某些成員

各個成員通過逗號 , 分隔開，如果成員是變量，不能省略 $符號。

三、SassScript

1. SASS 運算 (Operations)符的基本使用

等號操作符

所有的數據都支持等號運算符：

例1：數字比較

$theme:1;
.container {
    @if $theme==1 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

例2：字符串比較

$theme:"blue";
.container {
    @if $theme !="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

關系（比較）運算符

關系運算符只能用于整數比較

例子

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

邏輯運行符

+ 運算符

    width: 50 + 20;     // 70
    width: 50 + 20%;    // 70%
    width: 50% + 20%;   // 70%
    width: 20 + 10px;   // 30px
    width: 10px + 20px; // 30px
    width: 10px + 10pt; // 23.3333333333px
    // width: 20% + 10px;  // Error have incompatible units.
    // width: 10px * 2pt;  // Error 20px*pt isn't a valid CSS value.

- 運算符

    width: 50 - 30;     // 20
    width: 50 - 30%;    // 20%
    width: 60% - 30%;   // 30%
    width: 20px - 10px; // 10px
    width: 50px - 20pt; // 23.3333333333px
    width: 50px - 20;   // 30px
    // width: 50px - 20%;  // Error have incompatible units.

*運算符

    width: 20 * 10;     // 200
    width: 5 * 20%;     // 100
    // width: 10% * 20%;   //Error 出現了兩個百分號
    // width: 10px * 20px  //Error 出現了兩個單位
    width: 10px * 2;    // 20px

/運算符
/在 CSS 中通常起到分隔數字的用途，SassScript 作為 CSS 語言的拓展當然也支持這個功能，同時也賦予了 /除法運算的功能。也就是說，如果/在 SassScript 中把兩個數字分隔，編譯后的 CSS 文件中也是同樣的作用。

width: 10 / 5;    // 此時的/沒有被當作運算符，原樣輸出 10 / 5 
width: (10 / 5);  // 2

以下三種情況 / 將被視為除法運算符號：

• 如果值或值的一部分，是變量或者函數的返回值
• 如果值被圓括號包裹
• 如果值是算數表達式的一部分

$width: 1000px;
div {
    width: ($width/2); // 使用變量與括號
    z-index: round(10)/2; // 使用了函數
    height: (500px/2); // 使用了括號
    margin-left: 5px + 8px/2px; // 使用了+表達式
}

%運算符

    width: 10 % 3;     // 1
    width: 50 % 3px;   // 2px
    width: 50px % 3px; // 2px
    width: 50% % 7;    // 1%
    width: 50px % 7;   // 1px
    width: 50% % 9%;   // 5%
    // width: 50% % 2px;  // Error have incompatible units.
    width: 50px % 10pt;  // 10pt == 13.33333px  50px % 10pt=> 10px

字符串運算

+ 可用于連接字符串
注意：如果有引號字符串（位于 + 左側）連接無引號字符串，運算結果是有引號的，相反，無引號字符串（位于 + 左側）連接有引號字符串，運算結果則沒有引號。（如果有一個值是函數返回的，情況可能不一樣）

.container {
    content: "Foo" + Bar;         // "FooBar"
    content:  Foo + Bar;           // FooBar
    content: "Foo" + "Bar";       // "FooBar"
    font-family: sans- + "serif";  // sans-serif
}

2. 插值語句#{}

使用插值語句#{},可以確保 / 不做除法運算而是完整地編譯到 CSS 文件中

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height} Helvetica,sans-serif;
    // font: 16px/30px Arial, Helvetica, sans-serif; 
}

通過 #{} 插值語句可以在選擇器、屬性名、注釋中使用變量：

$class-name:danger;
$attr:color;
$author:"zzz";

/*
    這是文件說明部分
    @author:#{$author}
*/

a .#{$class-name} {
    border-#{$attr}: #F00;
}

3. 常見函數的基本使用

這里介紹常見函數使用，更多函數移步官網

Color(顏色函數)

sass包含很多操作顏色的函數。例如：lighten() 與 darken()函數可用于調亮或調暗顏色，opacify()函數使顏色透明度減少，transparent()函數使顏色透明度增加，mix()函數可用來混合兩種顏色。

String(字符串函數)

Sass有許多處理字符串的函數，比如向字符串添加引號的quote()、獲取字符串長度的string-length()和將內容插入字符串給定位置的string-insert()。

p{
    &:after{
        content: quote(這是里面的內容);
        content: str-insert($string: "abce", $insert:"d" , $index: 4);
    }
    background-color: unquote($string: "#f00");
    z-index: str-length("sass學習");
}

Math(數值函數)

數值函數處理數值計算，例如：percentage()將無單元的數值轉換為百分比，round()將數字四舍五入為最接近的整數，min()和max()獲取幾個數字中的最小值或最大值，random()返回一個隨機數。

p {
    z-index: abs($number: -15); // 15
    z-index: ceil(5.8); //6
    z-index: max(5, 1, 6, 8, 3); //8
    opacity: random(); // 隨機 0-1
}

List

List函數操作List，length()返回列表長度，nth()返回列表中的特定項，join()將兩個列表連接在一起，append()在列表末尾添加一個值。

p {
    z-index: length(12px); //1
    z-index: length(12px 5px 8px); //3
    z-index: index(a b c d, c); //3
    padding: append(10px 20px, 30px); // 10px 20px 30px
    color: nth($list: red blue green, $n: 2); // blue
}

Map函數

Map函數操作Map，map-get()根據鍵值獲取map中的對應值，map-merge()來將兩個map合并成一個新的map，map-values()映射中的所有值。

$font-sizes:("small":12px,"normal":18px,"large":24px);
$padding:(top:10px,right:20px,bottom:10px,left:30px);
p{
    font-size: map-get($map: $font-sizes, $key: "normal"); // 18px
    @if map-has-key($padding, "right"){
        padding-right: map-get($padding, "right"); // 20px
    }
    &:after{
        // '"small", "normal", "large" 10px, 20px, 10px, 30px';
        content: map-keys($font-sizes) + " "+ map-values($padding) + "";
    }
}

selector選擇器函數

選擇符相關函數可對CSS選擇進行一些相應的操作，例如：selector-append()可以把一個選擇符附加到另一個選擇符，selector-unify()將兩組選擇器合成一個復合選擇器。

.header{
    background-color: #000;
    content: selector-append(".a",".b",".c") + '';  // ".a.b.c"
    content: selector-unify("a",".diasbled") + '';  // "a.diasbled"
}

自檢函數

自檢相關函數，例如：feature-exists()檢查當前Sass版本是否存在某個特性，variable-exists()檢查當前作用域中是否存在某個變量，mixin-exists()檢查某個mixin是否存在。

$color:#F00;
@mixin padding($left:0, $top:0, $right:0, $bottom:0) {
    padding: $top $right $bottom $left;
}

.container {
    @if variable-exists(color) {
        color: $color;
    }
    @else {
        content: "$color不存在";
    }
    @if mixin-exists(padding) {
        @include padding($left: 10px, $right: 10px);
    }
}

4. 流程控制指令@if、@for、@each、@while

@if 控制指令

@if()函數允許您根據條件進行分支，并僅返回兩種可能結果中的一種。
語法方式同js的if....else if ...else

$theme:"green";
.container {
    @if $theme=="red" {
        color: red;
    }
    @else if $theme=="blue" {
        color: blue;
    }
    @else if $theme=="green" {
        color: green;
    }
    @else {
        color: darkgray;
    }
}

@for指令

@for 指令可以在限制的范圍內重復輸出格式，每次按要求（變量的值）對輸出結果做出變動。這個指令包含兩種格式：@for $var from through ，或者 @for $var from to，區別在于 through 與 to 的含義：

• 當使用through時，條件范圍包含<start>與<end>的值。
• 而使用to 時條件范圍只包含<start>的值不包含<end>的值。
• 另外，$var 可以是任何變量，比如 $i<start> 和<end> 必須是整數值。

@for $i from 1 to 4 {
    .p#{$i} {
        width: 10px * $i;
        height: 30px;
        background-color: red;
    }
}

@for $i from 1 through 3 {
    .p#{$i} {
        width: 10px * $i;
        height: 30px;
        background-color: red;
    }
}

@each指令

有這樣一個例子，普通CSS寫法

p{
  display:inline-block;
  width:10px;
  height:10px;
  margin:10px;
}
p:nth-child(1){
  background:red;
}
p:nth-child(2){
  background:green;
}
p:nth-child(3){
  background:blue;
}
p:nth-child(4){
  background:orange;
}
p:nth-child(5){
  background:pink;
}

使用@each指令改寫，@each 指令的格式是 $var in <list> , $var 可以是任何變量名，比如 $length 或者 $name，而<list>是一連串的值，也就是值列表。

p{
  width:10px;
  height:10px;
  margin:10px;
  display:inline-block;
}
$color-list:red green blue orange pink;
@each $color in $color-list{
  /*使用index()獲取當前顏色在列表的所屬位置*/
  $index:index($color-list,$color);
  p:nth-child(#{$index}){
    background:$color;
  }
}

@while 指令

@while 指令重復輸出格式直到表達式返回結果為 false。這樣可以實現比 @for 更復雜的循環。
用sass實現bootstrap中css的這么一段代碼:

.col-sm-12 {
    width: 100%;
}
.col-sm-11 {
    width: 91.66666667%;
}
.col-sm-10 {
    width: 83.33333333%;
}
.col-sm-9 {
    width: 75%;
}
.col-sm-8 {
    width: 66.66666667%;
}
.col-sm-7 {
    width: 58.33333333%;
}
.col-sm-6 {
    width: 50%;
}
.col-sm-5 {
    width: 41.66666667%;
}
.col-sm-4 {
    width: 33.33333333%;
}
.col-sm-3 {
    width: 25%;
}
.col-sm-2 {
    width: 16.66666667%;
}
.col-sm-1 {
    width: 8.33333333%;
}

用@while改寫:

$column:12;
@while $column > 0 {
    .col-sm-#{$column}{
        // width:$column / 12*100%;
        // width: calc($column / 12) * 100%;
        width: unquote($string: $column / 12 * 100 + '%');
    }
    $column:$column - 1;
}