sass和scss有啥區(qū)別

sass比scss要先2年發(fā)布刺下，sass使用換行來代表分號共郭，用縮進(jìn)來代表花括號，這樣很不適合前端開發(fā)習(xí)慣糠馆。而scss是sass的超集嘶伟，書寫方法與常見的css書寫方法類似。就像這樣：

/*sass書寫方法*/
#nav
  width: 30px
  height: 100px

/*scss書寫方法*/
#nav{
  width: 30px;
  height: 100px;
}

安裝方法

1.npm安裝： npm install node-sass -g

安裝完后使用 node-sass -v 可以查看版本

查看node-sass版本

之后輸入 node-sass --watch -r 文件夾名1 -o 文件夾名2 可以實(shí)時監(jiān)控改變又碌，將 文件夾1 的 scss文件 實(shí)時編譯成 css文件 放入 文件夾2中九昧，并且跟蹤同名文件，沒有則新建


node-sass --watch scss/test.scss css/test.css 實(shí)時監(jiān)控單文件改變并編譯
不懂的可以使用 node-sass --help 查看幫助文檔

2.編輯器安裝使用：

vscode : 安裝 Easy-Sass赠橙、Sass 2個擴(kuò)展

語法

原文鏈接：https://github.com/ggdream/scss/blob/master/3%E3%80%81SassScript.md

在 CSS 屬性的基礎(chǔ)上 Sass 提供了一些名為 SassScript 的新功能耽装。 SassScript 可作用于任何屬性，允許屬性使用變量期揪、算數(shù)運(yùn)算等額外功能掉奄。

弱類型語言, 對語法要求沒那么嚴(yán)格

一、注釋

1. Sass 支持標(biāo)準(zhǔn)的 CSS 多行注釋 /* */凤薛，以及單行注釋 //姓建，前者會被完整輸出到編譯后的 CSS 文件中，而后者則不會缤苫。

2. 將 ! 作為多行注釋的第一個字符表示在壓縮輸出模式下保留這條注釋并輸出到 CSS 文件中速兔，通常用于添加版權(quán)信息。

3. 插值語句 (interpolation) 也可寫進(jìn)多行注釋中輸出變量值

例如：

/* 
    hello
    world!
*/

// compile scss files to css
// it's ready to do it.
$pink: #f3e1e1;
html{
    background-color: $pink;
}

$author: 'abc@126.com';
/*!
    Author: #{$author}.
*/

開發(fā)模式編譯后:

/* 
    hello
    world!
*/
html{
    background-color: #f3e1e1;
}
/*!
    Author: 'gdream@126.com'.
*/

壓縮輸出模式編譯后：

html{
    background-color: #f3e1e1;
}
/*!
    Author: 'gdream@126.com'.
*/

二活玲、變量

1.定義

變量以美元符號開頭涣狗，賦值方法與 CSS 屬性的寫法一樣

$width: 1600px;
$pen-size: 3em;

2.使用

直接使用變量的名稱即可調(diào)用變量

#app {
    height: $width;
    font-size: $pen-size;
}

3.作用域

變量支持塊級作用域，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用（局部變量）舒憾，不在嵌套規(guī)則內(nèi)定義的變量則可在任何地方使用（全局變量）镀钓。將局部變量轉(zhuǎn)換為全局變量可以添加 !global 聲明

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

#bar {
  width: $width;
}

編譯后：

#foo {
  width: 5em;
}

#bar {
  width: 5em;
}

三、數(shù)據(jù)類型

SassScript 支持 7 種主要的數(shù)據(jù)類型：

• 數(shù)字镀迂，1, 2, 13, 10px
• 字符串丁溅，有引號字符串與無引號字符串，"foo", 'bar', baz
• 顏色探遵，blue, #04a3f9, rgba(255,0,0,0.5)
• 布爾型窟赏，true, false
• 空值妓柜，null
• 數(shù)組 (list)，用空格或逗號作分隔符涯穷，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相當(dāng)于 JavaScript 的 object棍掐，(key1: value1, key2: value2)

SassScript 也支持其他 CSS 屬性值，比如 Unicode 字符集求豫，或 !important 聲明塌衰。然而Sass 不會特殊對待這些屬性值，一律視為無引號字符串蝠嘉。

判斷數(shù)據(jù)類型的方式：type-of($value)

1.字符串 (Strings)

SassScript 支持 CSS 的兩種字符串類型：有引號字符串 (quoted strings)，和無引號字符串 (unquoted strings)杯巨。

$name: 'Tom Bob';
$container: "top bottom";
$what: heart;

// 注：在編譯 CSS 文件時不會改變其類型蚤告。只有一種情況例外，使用 `#{}` (interpolation) 時服爷，有引號字符串將被編譯為無引號字符串杜恰，這樣便于在 mixin 中引用選擇器名

2.數(shù)字(Numbers)

SassScript支持兩種數(shù)字類型：帶單位數(shù)字和不帶單位數(shù)字。（可正可負(fù)可為零仍源，可正可浮點(diǎn)）

$my-age: 19;
$your-age: 19.5;
$height: 120px;

// 注：單位會和數(shù)字當(dāng)做一個整體心褐，進(jìn)行算數(shù)運(yùn)算

3.空值(Null)

只有一個取值null

$value: null;

// 注：由于它代表空，所以不能夠使用它與任何類型進(jìn)行算數(shù)運(yùn)算

4.布爾型(Booleans)

只有兩個取值：true和false

$a: true;
$b: false;

// 注：只有自身是false和null才會返回false笼踩，其他一切都將返回true

5.數(shù)組 (Lists)

通過空格或者逗號分隔的一系列的值逗爹。事實(shí)上，獨(dú)立的值也被視為數(shù)組 —— 只包含一個值的數(shù)組嚎于。索引從1開始

$list0: 1px 2px 5px 6px;
$list1: 1px 2px, 5px 6px;
$list2: (1px 2px) (5px 6px);

數(shù)組中可以包含子數(shù)組掘而，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個數(shù)組的數(shù)組。如果內(nèi)外兩層數(shù)組使用相同的分隔方式于购，需要用圓括號包裹內(nèi)層袍睡，所以也可以寫成 (1px 2px) (5px 6px)。變化是肋僧，之前的 1px 2px, 5px 6px 使用逗號分割了兩個子數(shù)組 (comma-separated)斑胜，而 (1px 2px) (5px 6px) 則使用空格分割(space-separated)。

當(dāng)數(shù)組被編譯為 CSS 時嫌吠，Sass 不會添加任何圓括號（CSS 中沒有這種寫法）止潘，所以 (1px 2px) (5px 6px) 與 1px 2px, 5px 6px 在編譯后的 CSS 文件中是完全一樣的，但是它們在 Sass 文件中卻有不同的意義居兆，前者是包含兩個數(shù)組的數(shù)組覆山，而后者是包含四個值的數(shù)組。

用 () 表示不包含任何值的空數(shù)組（在 Sass 3.3 版之后也視為空的 map）泥栖〈乜恚空數(shù)組不可以直接編譯成 CSS勋篓，比如編譯 font-family: () Sass 將會報(bào)錯。如果數(shù)組中包含空數(shù)組或空值魏割，編譯時將被清除譬嚣，比如 1px 2px () 3px 或 1px 2px null 3px。

基于逗號分隔的數(shù)組允許保留結(jié)尾的逗號钞它，這樣做的意義是強(qiáng)調(diào)數(shù)組的結(jié)構(gòu)關(guān)系拜银，尤其是需要聲明只包含單個值的數(shù)組時。例如 (1,) 表示只包含 1 的數(shù)組遭垛，而 (1 2 3,) 表示包含 1 2 3 這個以空格分隔的數(shù)組的數(shù)組尼桶。

6.映射(Maps)

Maps必須被圓括號包圍，可以映射任何類型鍵值對（任何類型锯仪，包括內(nèi)嵌maps泵督，不過不推薦這種內(nèi)嵌方式）

$map: ( 
  $key1: value1, 
  $key2: value2, 
  $key3: value3 
)

7.顏色 (Colors)

CSS原有顏色類型，十六進(jìn)制庶喜、RGB小腊、RGBA、HSL久窟、HSLA和色彩單詞

SCSS提供了內(nèi)置Colors函數(shù)秩冈，從而更方便地使用顏色

$color0: green;
$color1: lighten($color, 15%);
$color2: darken($color, 15%);
$color3: saturate($color, 15%);
$color4: desaturate($color, 15%);
$color5: (green + red);

四、運(yùn)算

1.數(shù)字運(yùn)算符

SassScript 支持?jǐn)?shù)字的加減乘除斥扛、取整等運(yùn)算 (+, -, *, /, %)入问，如果必要會在不同單位間轉(zhuǎn)換值

如果要保留運(yùn)算符號，則應(yīng)該使用插值語法

• +

  // 純數(shù)字
  $add1: 1 + 2; // 3
  $add2: 1 + 2px; // 3px
  $add3: 1px + 2; // 3px
  $add4: 1px + 2px;//3px
  
  // 純字符串
  $add5: "a" + "b"; // "ab"
  $add6: "a" + b;     // "ab"
  $add7: a + "b";     // ab
  $add8: a + b;   // ab
  
  // 數(shù)字和字符串
  $add9: 1 + a; // 1a
  $adda: a + 1; // a1
  $addb: "1" + a; // "1a"
  $addc: 1 + "a"; // "1a"
  $addd: "a" + 1; // "a1"
  $adde: a + "1"; // a1
  $addf: 1 + "1"; // "11"
  

  // 總結(jié)：
  a.純數(shù)字：只要有單位犹赖，結(jié)果必有單位
  b.純字符串：第一個字符串有無引號決定結(jié)果是否有引號
  c數(shù)字和字符串：第一位有引號队他，結(jié)果必為引號；第一位對應(yīng)數(shù)字非數(shù)字且最后一位帶有引號峻村，則結(jié)果必為引號
  

• -

  $add1: 1 - 2; // -1
  $add2: 1 - 2px; // -1px
  $add3: 1px - 2; // -1px
  $add4: 1px - 2px;//-1px
  
  $sub1: a - 1;  // a-1
  $sub2: 1 - a;  // 1-a
  $sub3: "a" - 1;// "a"-1
  $sub4: a - "1";// a-"1"
  

  // 總結(jié)：
  每個字段必須前部分為數(shù)字麸折，且兩個字段只能一個后部分是字符(因?yàn)榇藭r后綴被當(dāng)被單位看待了)。
  只要其中一個值首位不為數(shù)字的粘昨，結(jié)果就按順序去除空格后拼接起來
  

• *

  $num1: 1 * 2;    // 2
  $mul2: 1 * 2px;  // 2px
  $num3: 1px * 2;  // 2px
  $num4: 2px * 2px;// 編譯不通過
  
  $num5: 1 * 2abc; // 2abc
  

  // 總結(jié)：
  每個字段必須前部分為數(shù)字垢啼，且兩個字段只能一個后部分是字符(因?yàn)榇藭r后綴被當(dāng)被單位看待了)。其余編譯不通過
  

• /

  // 總結(jié)：
  a.不會四舍五入张肾，精確到小數(shù)點(diǎn)后5位
  b.每個字段必須前部分為數(shù)字芭析，且當(dāng)前者只是單純數(shù)字無單位時，后者(除數(shù))后部分不能有字符吞瞪。其余結(jié)果就按順序去除空格后拼接起來馁启。
  (因?yàn)榇藭r后綴被當(dāng)被單位看待了)
  

• %

  // 總結(jié)：
  a.值與"%"之間必須要有空格，否則會被看做字符串
  

2.關(guān)系運(yùn)算符

大前提：兩端必須為數(shù)字 或 前部分?jǐn)?shù)字后部分字符

返回值：true or false

• >

  $a: 1 > 2; // false
  

• <

  $a: 1 > 2; // true
  

• >=

  $a: 1 >= 2; // false
  

• <=

  $a: 1 <= 2; // true
  

3.相等運(yùn)算符

作用范圍：相等運(yùn)算 ==, != 可用于所有數(shù)據(jù)類型

返回值：true or false

$a: 1 == 1px; // true
$b: "a" == a; // true

// 總結(jié)：
前部分為不帶引號數(shù)字時，對比的僅僅是數(shù)字部分惯疙；反之翠勉，忽略引號，要求字符一一對應(yīng)

4.布爾運(yùn)算符

SassScript 支持布爾型的 and or 以及 not 運(yùn)算霉颠。

$a: 1>0 and 0>=5; // fasle

// 總結(jié)：
值與"and"对碌、"or"和"not"之間必須要有空格，否則會被看做字符串

5.顏色值運(yùn)算

顏色值的運(yùn)算是分段計(jì)算進(jìn)行的蒿偎，也就是分別計(jì)算紅色朽们，綠色，以及藍(lán)色的值

• 顏色值與顏色值

  p {
    color: #010203 + #040506;
  }
  
  // 計(jì)算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09诉位，然后編譯為
  // p {
    color: #050709; }
  

• 顏色值與數(shù)字

  p {
    color: #010203 * 2;
  }
  
  // 計(jì)算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06骑脱，然后編譯為
  // p {
    color: #020406; }
  

• RGB和HSL

  // 如果顏色值包含 alpha channel（rgba 或 hsla 兩種顏色值），必須擁有相等的 alpha 值才能進(jìn)行運(yùn)算不从，因?yàn)樗阈g(shù)運(yùn)算不會作用于 alpha 值惜姐。
  
  p {
    color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
  }
  
  // p {
    color: rgba(255, 255, 0, 0.75); }
  

6.運(yùn)算優(yōu)先級

1. ()

2. *、/椿息、%

3. +、-

4. > 坷衍、<寝优、>=、<=

五枫耳、嵌套語法

六乏矾、雜貨語法

1.插值語法

通過 #{} 插值語句可以在選擇器、屬性名和屬性值中使用變量迁杨。

但大多數(shù)情況下钻心，這樣使用屬性值可能還不如直接使用變量方便，但是使用 #{} 可以避免 Sass 運(yùn)行運(yùn)算表達(dá)式铅协，直接編譯 CSS捷沸。

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: $name;
}

// 編譯后：
p.foo {
  border-color: foo;
}

2.& in SassScript

&為父選擇器

a {
    color: yellow;
    &:hover{
        color: green;
    }
    &:active{
        color: blank;
    }
}

3.!default

可以在變量的結(jié)尾添加 !default 給一個未通過 !default 聲明賦值的變量賦值，此時狐史，如果變量已經(jīng)被賦值痒给，不會再被重新賦值，但是如果變量還沒有被賦值骏全，則會被賦予新的值苍柏。

$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"; }

注意：變量是 null 空值時將視為未被 !default 賦值。

3.!global

將局部變量提升為全局變量

4.!optional

如果 @extend 失敗會收到錯誤提示姜贡，比如试吁，這樣寫 a.important {@extend .notice}，當(dāng)沒有 .notice 選擇器時楼咳，將會報(bào)錯熄捍，只有 h1.notice 包含 .notice 時也會報(bào)錯烛恤，因?yàn)?h1 與 a 沖突，會生成新的選擇器治唤。

如果要求 @extend 不生成新選擇器棒动，可以通過 !optional 聲明達(dá)到這個目的.

簡而言之：當(dāng)@extend相關(guān)代碼出現(xiàn)語法錯誤時，編譯器可能會給我們"亂"編譯為css宾添，我們加上這個參數(shù)可以在出現(xiàn)問題后不讓他編譯該部分代碼

七船惨、@-Rules與指令

1.@import

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

通常怜浅，@import 尋找 Sass 文件并將其導(dǎo)入，但在以下情況下蔬崩，@import 僅作為普通的 CSS 語句恶座，不會導(dǎo)入任何 Sass 文件。

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

如果不在上述情況內(nèi)脉让，文件的拓展名是 .scss 或 .sass，則導(dǎo)入成功功炮。沒有指定拓展名溅潜，Sass 將會試著尋找文件名相同，拓展名為 .scss 或 .sass 的文件并將其導(dǎo)入薪伏。

@import "foo.scss";
@import "foo";
// 以上兩種方式均可


// 以下方式均不可行
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

Sass 允許同時導(dǎo)入多個文件滚澜，例如同時導(dǎo)入 rounded-corners 與 text-shadow 兩個文件：

@import "rounded-corners", "text-shadow";

導(dǎo)入文件也可以使用 #{ } 插值語句，但不是通過變量動態(tài)導(dǎo)入 Sass 文件毅该，只能作用于 CSS 的 url() 導(dǎo)入方式：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

// 編譯為：
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

如果你有一個 SCSS 或 Sass 文件需要引入尝偎， 但是你又不希望它被編譯為一個 CSS 文件悲柱， 這時，你就可以在文件名前面加一個下劃線，就能避免被編譯夫否。 這將告訴 Sass 不要把它編譯成 CSS 文件渊鞋。 然后丰歌，你就可以像往常一樣引入這個文件了惰帽，而且還可以省略掉文件名前面的下劃線。

除此之外，還支持嵌套 @import,但是不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import母赵。

2.@media

Sass 中 @media 指令與 CSS 中用法一樣逸爵，只是增加了一點(diǎn)額外的功能：允許其在 CSS 規(guī)則中嵌套。如果 @media 嵌套在 CSS 規(guī)則內(nèi)凹嘲，編譯時师倔，@media 將被編譯到文件的最外層，包含嵌套的父選擇器周蹭。這個功能讓 @media 用起來更方便趋艘，不需要重復(fù)使用選擇器，也不會打亂 CSS 的書寫流程凶朗。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
// 編譯為
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

@media的 queries 允許互相嵌套使用瓷胧，編譯時，Sass 自動添加 and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
// 編譯為：
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

@media 甚至可以使用 SassScript（比如變量棚愤，函數(shù)搓萧，以及運(yùn)算符）代替條件的名稱或者值

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
// 編譯為：
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

3.*@extend

@extend即繼承。在設(shè)計(jì)網(wǎng)頁的時候常常遇到這種情況：一個元素使用的樣式與另一個元素完全相同宛畦，但又添加了額外的樣式瘸洛。

總的來看：支持層疊繼承、多繼承次和、允許延伸任何定義給單個元素的選擇器（但是允許不一定好用）

a. 基本延伸

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
// 上面代碼的意思是將 .error 下的所有樣式繼承給 .seriousError货矮，border-width: 3px; 是單獨(dú)給 .seriousError 設(shè)定特殊樣式，這樣斯够，使用 .seriousError 的地方可以不再使用 .error。

@extend 的作用是將重復(fù)使用的樣式 (.error) 延伸 (extend) 給需要包含這個樣式的特殊樣式（.seriousError）

注意理解以下情況：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
// .error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

當(dāng)合并選擇器時喧锦，@extend 會很聰明地避免無謂的重復(fù)读规，.seriousError.seriousError 將編譯為 .seriousError，不能匹配任何元素的選擇器也會刪除燃少。

b. 延伸復(fù)雜的選擇器：Class 選擇器并不是唯一可以被延伸 (extend) 的束亏，Sass 允許延伸任何定義給單個元素的選擇器，比如 .special.cool阵具，a:hover 或者 a.user[href^="http://"] 等

c. 多重延伸：同一個選擇器可以延伸給多個選擇器碍遍，它所包含的屬性將繼承給所有被延伸的選擇器

d. 繼續(xù)延伸：當(dāng)一個選擇器延伸給第二個后，可以繼續(xù)將第二個選擇器延伸給第三個

e.*選擇器列：暫時不可以將選擇器列 (Selector Sequences)阳液，比如 .foo .bar 或 .foo + .bar怕敬，延伸給其他元素，但是帘皿，卻可以將其他元素延伸給選擇器列东跪。

盡量不使用合并選擇器列，因?yàn)槿绻麘{個人推理的話，會出現(xiàn)排列組合的情況虽填，所以SASS編譯器只會保留有用的組合形式丁恭，但依舊會存在排列組合的情況，有可能會留下隱患斋日。

1. 當(dāng)兩個列合并時牲览，如果沒有包含相同的選擇器，將生成兩個新選擇器：第一列出現(xiàn)在第二列之前恶守，或者第二列出現(xiàn)在第一列之前

   #admin .tabbar a {
     font-weight: bold;
   }
   #demo .overview .fakelink {
     @extend a;
   }
   // 編譯為：
   #admin .tabbar a,
   #admin .tabbar #demo .overview .fakelink,
   #demo .overview #admin .tabbar .fakelink {
     font-weight: bold; }
   

2. 如果兩個列包含了相同的選擇器第献，相同部分將會合并在一起，其他部分交替輸出

   #admin .tabbar a {
     font-weight: bold;
   }
   #admin .overview .fakelink {
     @extend a;
   }
   // 編譯為
   #admin .tabbar a,
   #admin .tabbar .overview .fakelink,
   #admin .overview .tabbar .fakelink {
     font-weight: bold; }
   

f. 在指令中延伸

在指令中使用 @extend 時（比如在 @media 中）有一些限制：Sass 不可以將 @media 層外的 CSS 規(guī)則延伸給指令層內(nèi)的 CSS.

g. %placeholder為選擇器占位符熬的，配合@extend-Only選擇器使用痊硕。

效果：只定義了樣式，但不會對原有選擇器匹配的元素生效

// example1:
%img {
    color: red;
}
.path{
    @extend %img;
}
// 編譯后：
.path {
  color: red;
}

// example2:
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
// 編譯后：
.notice {
  @extend %extreme;
}

// 注：必須是"."和"#"選擇器

4.@at-root

The @at-root directive causes one or more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors. It can either be used with a single inline selector

譯文：@at root指令使一個或多個規(guī)則在文檔的根發(fā)出押框，而不是嵌套在其父選擇器下岔绸。它可以與單個內(nèi)聯(lián)選擇器一起使用

且@at-root 使多個規(guī)則跳出嵌套

@at-root默認(rèn)情況下并不能使規(guī)則或者選擇器跳出指令，通過使用without和with可以解決該問題

了解即可

5.@debug

用于調(diào)試橡伞，按標(biāo)準(zhǔn)錯誤輸出流輸出

$size: 9px;

.file{
  @debug $size;
}

6.@warn

用于警告盒揉，按標(biāo)準(zhǔn)錯誤輸出流輸出

7.@error

用于報(bào)錯，按標(biāo)準(zhǔn)錯誤輸出流輸出

八挂脑、控制指令

1.if()

三元運(yùn)算符

表達(dá)式：if(expression, value1, value2)

p {
    color: if(1 + 1 = 2, green, yellow);
}

// compile:
p{
    color: green;}

2.@if

條件語句

當(dāng) @if 的表達(dá)式返回值不是 false 或者 null 時藕漱，條件成立，輸出 {} 內(nèi)的代碼

@if 聲明后面可以跟多個 @else if 聲明崭闲，或者一個 @else 聲明肋联。如果 @if 聲明失敗，Sass 將逐條執(zhí)行 @else if 聲明刁俭，如果全部失敗橄仍，最后執(zhí)行 @else 聲明

• 單@if

  p {
      @if 1 + 1 == 2 {
          color: red;
      }
  }
  
  // compile:
  p {
    color: red;
  }
  

• @if - @else

  p {
      @if 1 + 1 != 2 {
          color: red;
      } @else {
          color: blue;
      }
  }
  
  // compile:
  p {
    color: blue;
  }
  

• @if - @else if - @else

  $age: 19;
  
  p {
      @if $age == 18 {
          color: red;
      } @else if $age == 19 {
          color: blue;
      } @else {
          color: green;
      }
  }
  
  // compile:
  p {
    color: blue;
  }
  

3.@for

循環(huán)語句

表達(dá)式：@for $var from <start> through <end> 或 @for $var from <start> to <end>

through 和 to 的相同點(diǎn)與不同點(diǎn)：

• 相同點(diǎn)：兩者均包含<start>的值
• 不同點(diǎn)：through包含<end>的值，但to不包含<end>的值

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

// compile:
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

4.@while

循環(huán)語句

表達(dá)式：@while expression

@while 指令重復(fù)輸出格式直到表達(dá)式返回結(jié)果為 false牍戚。這樣可以實(shí)現(xiàn)比 @for 更復(fù)雜的循環(huán)侮繁，只是很少會用到

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

// compile:
.item-6 {
  width: 12em; }
.item-4 {
  width: 8em; }
.item-2 {
  width: 4em; }

5.@each

循環(huán)語句

表達(dá)式：$var in $vars

$var 可以是任何變量名

$vars 只能是Lists或者Maps

• 一維列表

  @each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
      background-image: url('/images/#{$animal}.png');
    }
  }
  
  // compile:
  .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'); }
  

• 二維列表

  @each $animal, $color, $cursor in (puma, black, default),
                                    (sea-slug, blue, pointer),
                                    (egret, white, move) {
    .#{$animal}-icon {
      background-image: url('/images/#{$animal}.png');
      border: 2px solid $color;
      cursor: $cursor;
    }
  }
  
  // compile:
  .puma-icon {
    background-image: url('/images/puma.png');
    border: 2px solid black;
    cursor: default; }
  .sea-slug-icon {
    background-image: url('/images/sea-slug.png');
    border: 2px solid blue;
    cursor: pointer; }
  .egret-icon {
    background-image: url('/images/egret.png');
    border: 2px solid white;
    cursor: move; }
  

• maps

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

九、混合指令

混合指令（Mixin）用于定義可重復(fù)使用的樣式如孝，避免了使用無語意的 class宪哩，比如 .float-left∈罹梗混合指令可以包含所有的 CSS 規(guī)則斋射，絕大部分 Sass 規(guī)則育勺，甚至通過參數(shù)功能引入變量，輸出多樣化的樣式罗岖。

注意：這不是函數(shù)涧至！沒有返回值！桑包！

1.定義混合指令

混合指令的用法是在 @mixin 后添加名稱與樣式南蓬，以及需要的參數(shù)（可選）。

// 格式：
@mixin name {
    // 樣式....
}

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

2.引用混合樣式

使用 @include 指令引用混合樣式哑了，格式是在其后添加混合名稱赘方，以及需要的參數(shù)（可選）。

// 格式：
@include name;

// 注：無參數(shù)或參數(shù)都有默認(rèn)值時弱左，帶不帶括號都可以

// example：
p {
    @include large-text;
}

// compile:
p {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
}

3.參數(shù)

格式：按照變量的格式窄陡，通過逗號分隔，將參數(shù)寫進(jìn)Mixin名稱后的圓括號里

支持默認(rèn)值拆火；支持多參數(shù)跳夭；支持不定參數(shù)；支持位置傳參和關(guān)鍵詞傳參

a. 位置傳參

@mixin mp($width) {
    margin: $width;
}

body {
    @include mp(300px);
}

b.關(guān)鍵詞傳參

@mixin mp($width) {
    margin: $width;
}

body {
    @include mp($width: 300px);
}

c.參數(shù)默認(rèn)值

@mixin mp($width: 500px) {
    margin: $width;
}

body {
    @include mp($width: 300px);
    // or
    @include mp(300px);
}

d.不定參數(shù)

官方：Variable Arguments

譯文：參數(shù)變量

有時们镜，不能確定混合指令需要使用多少個參數(shù)币叹。這時，可以使用參數(shù)變量 … 聲明（寫在參數(shù)的最后方）告訴 Sass 將這些參數(shù)視為值列表處理

@mixin mar($value...) {
    margin: $value;
}

4.向混合樣式中導(dǎo)入內(nèi)容

在引用混合樣式的時候模狭，可以先將一段代碼導(dǎo)入到混合指令中颈抚，然后再輸出混合樣式，額外導(dǎo)入的部分將出現(xiàn)在 @content 標(biāo)志的地方

可以看作參數(shù)的升級版

@mixin example {
    html {
        @content;
    }
}
@include example{
    background-color: red;
    .logo {
        width: 600px;
    }
}

// compile:
html {
  background-color: red;
}

html .logo {
  width: 600px;
}

十嚼鹉、函數(shù)指令

1.內(nèi)置函數(shù)

a. 字符串函數(shù)

索引第一個為1贩汉，最后一個為-1；切片兩邊均為閉區(qū)間

函數(shù)名和參數(shù)類型	函數(shù)作用
quote($string)	添加引號
unquote($string)	除去引號
to-lower-case($string)	變?yōu)樾?/td>
to-upper-case($string)	變?yōu)榇髮?/td>
str-length($string)	返回$string的長度(漢字算一個)
str-index(substring)	返回string的位置
str-insert(insert, $index)	在index處插入$insert
str-slice(start-at, $end-at）	截取start-at和$end-at之間的字符串

b. 數(shù)字函數(shù)

c. 數(shù)組函數(shù)

函數(shù)名和參數(shù)類型	函數(shù)作用
length($list)	獲取數(shù)組長度
nth($list, n)	獲取指定下標(biāo)的元素
set-nth(n, $value)	向n處插入$value
join(list2, $separator)	拼接separator為新list的分隔符宴树，默認(rèn)為auto，可選擇comma晶疼、space
append(val, $separator)	向val酒贬；$separator為新list的分隔符，默認(rèn)為auto翠霍，可選擇comma锭吨、space
index(value)	返回list中的索引值
zip($lists…)	將幾個列表結(jié)合成一個多維的列表；要求每個的列表個數(shù)值必須是相同的

d. 映射函數(shù)

函數(shù)名和參數(shù)類型	函數(shù)作用
map-get(key)	獲取key對應(yīng)的$value
map-merge(map2)	合并map2寒匙，返回一個新$map
map-remove(key)	從key零如，返回一個新$map
map-keys($map)	返回key
map-values($map)	返回value
map-has-key(key)	判斷key躏将，返回對應(yīng)的布爾值
keywords($args)	返回一個函數(shù)的參數(shù)，并可以動態(tài)修改其值

e. 顏色函數(shù)

• RGB函數(shù)

  函數(shù)名和參數(shù)類型	函數(shù)作用
  rgb(green, $blue)	返回一個16進(jìn)制顏色值
  rgba(green,alpha)	返回一個rgba考蕾；green和$blue可被當(dāng)作一個整體以顏色單詞祸憋、hsl、rgb或16進(jìn)制形式傳入
  red($color)	從$color中獲取其中紅色值
  green($color)	從$color中獲取其中綠色值
  blue($color)	從$color中獲取其中藍(lán)色值
  mix(color2,$weight?)	按照color1和$color2混合為一個新顏色

• HSL函數(shù)

  函數(shù)名和參數(shù)類型	函數(shù)作用
  hsl(saturation,$lightness)	通過色相（hue）蚯窥、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個顏色
  hsla(saturation,alpha)	通過色相（hue）、飽和度(saturation)塞帐、亮度（lightness）和透明（alpha）的值創(chuàng)建一個顏色
  saturation($color)	從一個顏色中獲取飽和度（saturation）值
  lightness($color)	從一個顏色中獲取亮度（lightness）值
  adjust-hue(degrees)	通過改變一個顏色的色相值拦赠，創(chuàng)建一個新的顏色
  lighten(amount)	通過改變顏色的亮度值，讓顏色變亮葵姥，創(chuàng)建一個新的顏色
  darken(amount)	通過改變顏色的亮度值荷鼠，讓顏色變暗，創(chuàng)建一個新的顏色
  hue($color)	從一個顏色中獲取亮度色相（hue）值

• Opacity函數(shù)

  alpha(color)	獲取顏色透明度值
  rgba(alpha)	改變顏色的透明度
  opacify(amount) / fade-in(amount)	使顏色更不透明
  transparentize(amount) / fade-out(amount)	使顏色更加透明

f. Introspection函數(shù)

函數(shù)名和參數(shù)類型	函數(shù)作用
type-of($value)	返回$value的類型
unit($number)	返回$number的單位
unitless($number)	判斷$number是否帶單位榔幸，返回對應(yīng)的布爾值
comparable(number2)	判斷number2是否可以做加允乐、減和合并，返回對應(yīng)的布爾值

2.自定義函數(shù)

Sass 支持自定義函數(shù)牡辽，并能在任何屬性值或 Sass script 中使用

Params: 與Mixin一致

支持返回值

基本格式：

@function fn-name($params...) {
    @return $params;
}

// example:
@function fn-name($params...) {
    @return nth($params, 1);
}
p {
    height: fn-name(1px);
}

// compiled:
p {
  height: 1px;
}

十一喳篇、細(xì)節(jié)與展望

1.細(xì)節(jié)

a. @extend、@Mixin和@function的選擇

原文鏈接

image-20200707171035353

minxins在網(wǎng)絡(luò)傳輸中比@extend 擁有更好的性能.盡管有些文件未壓縮時更大态辛，但使用gzip壓縮后麸澜，依然可以保證我們擁有更好的性能。

所以@extend我們就盡量不要使用了奏黑，而@Mixin和@function的差別在定義和使用上

定義方式不同： @function 需要調(diào)用@return輸出結(jié)果炊邦。而 @mixin則不需要。

使用方式不同：@mixin 使用@include引用熟史，而 @function 使用小括號執(zhí)行函數(shù)馁害。

2.展望

以上內(nèi)容算是"基礎(chǔ)"部分，但是對于日常開發(fā)蹂匹，我覺得是足夠使用的了碘菜。

如果想要進(jìn)一步了解，就必須先去學(xué)習(xí)下Ruby限寞，使用Ruby相關(guān)模塊進(jìn)行更豐富地學(xué)習(xí)

Unfinished...