簡(jiǎn)介

1. Sass 和 Scss

Sass 和 Scss 其實(shí)是同一種東西锻弓，我們平時(shí)都稱之為 Sass；Scss 是 Sass 3 引入新的語(yǔ)法请唱，其語(yǔ)法完全兼容 CSS3弥咪，并且繼承了 Sass 的強(qiáng)大功能。也就是說(shuō)十绑，任何標(biāo)準(zhǔn)的 CSS3 樣式表都是具有相同語(yǔ)義的有效的 Scss文件聚至。

兩者之間不同之處有以下兩點(diǎn)：

1. 文件擴(kuò)展名不同贷屎，Sass 是以“.sass”后綴為擴(kuò)展名经磅，而 Scss 是以“.scss”后綴為擴(kuò)展名
2. 語(yǔ)法書寫方式不同蚯根，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書寫敷扫，不帶大括號(hào)({})和分號(hào)(;)音比，而 SCSS 的語(yǔ)法書寫和我們的 CSS 語(yǔ)法書寫方式非常類似膊夹。

示例:

// Sass 語(yǔ)法
$w:200px; //定義變量
$h:300px; //定義變量
body
    width:$w;
    height:$h;

// Scss 語(yǔ)法
$w:200px;
$h:300px;
body{
    width:$w;
    height:$h;
}

/* 編譯出來(lái)的css*/
body{
    width:200px;
    height:300px;
}

2. Sass/Scss 和 Css

• Sass 和 Css

  Sass 和 CSS 寫法的確存在一定的差異掠廓，由于 Sass 是基于 Ruby 寫出來(lái)握联，所以其延續(xù)了 Ruby 的書寫規(guī)范。在書寫 Sass 時(shí)不帶有大括號(hào)和分號(hào)役纹，其主要是依靠嚴(yán)格的縮進(jìn)方式來(lái)控制的偶摔。

• Scss 和 Css

  SCSS 和 CSS 寫法無(wú)差別，這也是 Sass 后來(lái)越來(lái)越受大眾喜歡原因之一促脉。簡(jiǎn)單點(diǎn)說(shuō)辰斋，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用。

安裝

Mac 系統(tǒng)

1. Ruby 安裝

確認(rèn)是否安裝了Ruby瘸味，打開終端宫仗，輸入 ruby -v .

• 有 ruby 信息 -- 已安裝 .

• 沒有 ruby 信息，使用 brew install ruby 安裝 ruby .

  鏈接： 安裝 Ruby .

2. Sass 安裝

使用 sass -v 查看 sass 版本號(hào)旁仿，檢查是否安裝了 sass .

• 在線安裝

  • 使用 sudo gem install sass 進(jìn)行安裝 sass .

• 本地安裝

  由于有時(shí)候直接使用上面的命令安裝會(huì)讓你無(wú)法正常實(shí)現(xiàn)安裝（網(wǎng)絡(luò)受限原因）藕夫，當(dāng)碰到這種情況之時(shí)，那么安裝需要特殊去處理枯冈，可以通過(guò)下面的方法來(lái)實(shí)現(xiàn) Sass 的正常安裝：

  • 下載 sass 文件毅贮，鏈接： Sass 下載 .

sass

• 使用 sudo gem install XXX/sass-3.7.4.gem 進(jìn)行安裝 sass .

  XXX ：下載的 sass 文件路徑。

Windows 系統(tǒng)

1. Ruby 安裝

• 下載 Ruby 安裝包霜幼，鏈接： Ruby 的官網(wǎng) .

• 安裝 Ruby嫩码，將Ruby可執(zhí)行文件添加到您的PATH

  ruby-setup

• Ruby 安裝完成后誉尖，在開始菜單中找到新安裝的 Ruby罪既，并啟動(dòng) Ruby 的 Command 控制面板

  start-ruby

2. Sass 安裝

• 在線安裝

  • 使用 gem install sass 進(jìn)行安裝 sass .

  • 或者：使用 gem install compass 通過(guò) Compass 來(lái)安裝 Sass.

    Compass 是基于 Sass 開發(fā)的一個(gè)框架。也就是說(shuō)铡恕，你安裝了 Compass琢感，也就同時(shí)安裝好了 Sass。

    Compass 是一個(gè)成熟的探熔、基于 Sass 開發(fā)的一個(gè)框架驹针，這里面集成了很多寫好的 mixins 和 Sass 函數(shù)。

• 本地安裝 (通 Mac 系統(tǒng) Sass 的本地安裝)

查測(cè)诀艰、更新及卸載

// 查看
sass -v

// 更新
gem update sass

// 卸載
gem uninstall sass

語(yǔ)法格式

1. Sass 語(yǔ)法格式

這里說(shuō)的 Sass 語(yǔ)法是 Sass 的最初語(yǔ)法格式柬甥，他是通過(guò) tab 鍵控制縮進(jìn)的一種語(yǔ)法規(guī)則，而且這種縮進(jìn)要求非常嚴(yán)格其垄。另外其不帶有任何的分號(hào)和大括號(hào)苛蒲。常常把這種格式稱為 Sass 老版本，其文件名以“.sass”為擴(kuò)展名绿满。

2. Scss 語(yǔ)法格式

SCSS 是 Sass 的新語(yǔ)法格式臂外，從外形上來(lái)判斷他和 CSS 長(zhǎng)得幾乎是一模一樣，代碼都包裹在一對(duì)大括號(hào)里，并且末尾結(jié)束處都有一個(gè)分號(hào)漏健。其文件名格式常常以“.scss”為擴(kuò)展名嚎货。

【注】：

sass 和 scss

“.sass”只能使用 Sass 老語(yǔ)法規(guī)則（縮進(jìn)規(guī)則），“.scss”使用的是 Sass 的新語(yǔ)法規(guī)則蔫浆，也就是 SCSS 語(yǔ)法規(guī)則（類似 CSS 語(yǔ)法格式）殖属。

編譯調(diào)試

1. Sass 編譯

①、命令編譯

使用電腦中的命令終端瓦盛，通過(guò)輸入 Sass 指令來(lái)編譯 Sass

• 單文件編譯 sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css .

  // ex: 有一個(gè) test.scss 文件需需要編譯
  sass test.scss:test.css
  

• 多文件編譯 sass sass/:css/.

  上面的命令表示將項(xiàng)目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件忱辅，并且將這些 CSS 文件都放在項(xiàng)目中“css”文件夾中。

• 開啟“watch”功能 sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css.

  // 單文件
  sass --watch test.scss:test.css
  
  // 多文件
  sass --watch sass/:css/
  

  這樣只要你的代碼進(jìn)行任保修改谭溉，都能自動(dòng)監(jiān)測(cè)到代碼的變化墙懂，并且給你直接編譯出來(lái)：

②、GUI 界面工具編輯

推薦：Koala .

③扮念、自動(dòng)化編譯(X)

2. 不同樣式風(fēng)格的輸出方法

①损搬、嵌套輸出方式 nested

sass --watch test.scss:test.css --style nested

--style nested

②、展開輸出方式 expanded

輸出的 CSS 樣式風(fēng)格和 nested 類似柜与，只是大括號(hào)在另起一行

sass --watch test.scss:test.css --style expanded

--style expanded

③巧勤、緊湊輸出方式 compact

sass --watch test.scss:test.css --style compact

--style compact

④、壓縮輸出方式 compressed

壓縮輸出方式會(huì)去掉標(biāo)準(zhǔn)的 Sass 和 CSS 注釋及空格

sass --watch test.scss:test.css --style compressed

--style compressed

3. 調(diào)試(X)

基本特性

基礎(chǔ)

1. 變量

Sass 的變量包括三個(gè)部分：

1. 聲明變量的符號(hào)“$”
2. 變量名稱
3. 賦予變量的值

定義變量圖解

• 默認(rèn)變量

  值后面加上!default 弄匕。

  $color : #fff !default;
  

  sass 的默認(rèn)變量一般是用來(lái)設(shè)置默認(rèn)值颅悉，然后根據(jù)需求來(lái)覆蓋，覆蓋的方式 - 只需要在調(diào)用該變量之前重新聲明下變量即可迁匠。

  sass-var

• 全局變量和局部變量

  定義全局變量(在選擇器剩瓶、函數(shù)、混合宏...的外面定義的變量為全局變量)城丧。

  可以簡(jiǎn)單的理解成延曙，全局變量就是定義在元素外面的變量，而定義在元素內(nèi)部的變量就是局部變量 亡哄。

• 全局變量的影子

  當(dāng)在局部范圍（選擇器內(nèi)枝缔、函數(shù)內(nèi)、混合宏內(nèi)...）聲明一個(gè)已經(jīng)存在于全局范圍內(nèi)的變量時(shí)蚊惯，局部變量就成為了全局變量的影子愿卸。基本上截型，局部變量只會(huì)在局部范圍內(nèi)覆蓋全局變量趴荸。

  sass-var2

2. 嵌套

• 選擇器嵌套

  sass-qiantao

• 屬性嵌套

  sass-qiantao-shuxing

  避免選擇器嵌套：

  • 選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發(fā)者需要花費(fèi)巨大精力計(jì)算不同縮進(jìn)級(jí)別下的選擇器具體的表現(xiàn)效果菠劝。
  • 選擇器越具體則聲明語(yǔ)句越冗長(zhǎng)赊舶，而且對(duì)最近選擇器的引用(&)也越頻繁睁搭。在某些時(shí)候，出現(xiàn)混淆選擇器路徑和探索下一級(jí)選擇器的錯(cuò)誤率很高笼平，這非常不值得园骆。

• 偽類嵌套

  sass-var-weilei

3. 混合宏

在 Sass 中，使用“@mixin”來(lái)聲明一個(gè)混合宏寓调。
使用“@include”來(lái)調(diào)用聲明好的混合宏锌唾。

• 不帶參數(shù)混合宏

  @mixin bdr{
      -webkit-border-radius: 5px;
      border-radius: 5px;
  }
  

  @mixin 是用來(lái)聲明混合宏的關(guān)鍵詞；
  bdr 是混合宏的名稱夺英；
  大括號(hào)里面是復(fù)用的樣式代碼晌涕。

• 帶參數(shù)混合宏

  參數(shù)：不帶值的參數(shù)、帶值的參數(shù)痛悯、多個(gè)參數(shù)
  有一個(gè)特別的參數(shù)“…”余黎。當(dāng)混合宏傳的參數(shù)過(guò)多之時(shí)，可以使用參數(shù)來(lái)替代载萌。

  // 帶值的參數(shù)
  @mixin bdr($radius:10px){
      -webkit-border-radius: $radius;
      border-radius: $radius;
  }
  

• 復(fù)雜的混合宏

  @mixin box-shadow($shadow...) {
    @if length($shadow) >= 1 {
      @include prefixer(box-shadow, $shadow);
    } @else{
      $shadow:0 0 4px rgba(0,0,0,.3);
      @include prefixer(box-shadow, $shadow);
    }
  }
  

  這個(gè) box-shadow 的混合宏惧财，帶有多個(gè)參數(shù)，這個(gè)時(shí)候可以使用“ … ”來(lái)替代扭仁。簡(jiǎn)單的解釋一下垮衷，當(dāng) $shadow 的參數(shù)數(shù)量值大于或等于“ 1 ”時(shí)，表示有多個(gè)陰影值乖坠，反之調(diào)用默認(rèn)的參數(shù)值“ 0 0 4px rgba(0,0,0,.3) ”搀突。

• 調(diào)用混合宏

  sass-mixin

• 混合宏的不足

  混合宏在實(shí)際編碼中給我們帶來(lái)很多方便之處，特別是對(duì)于復(fù)用重復(fù)代碼塊熊泵。但其最大的不足之處是會(huì)生成冗余的代碼塊仰迁。

  [圖片上傳失敗...(image-3db9ab-1570777735972)]

  在調(diào)用相同的混合宏時(shí)，并不能智能的將相同的樣式代碼塊合并在一起戈次。這也是 Sass 的混合宏最不足之處轩勘。

4. 擴(kuò)展/繼承

在 Sass 中是通過(guò)關(guān)鍵詞 “@extend”來(lái)繼承已存在的類樣式塊筒扒，從而實(shí)現(xiàn)代碼的繼承怯邪。

sass-extend

在 Sass 中的繼承，可以繼承類樣式塊中所有樣式代碼花墩，而且編譯出來(lái)的 CSS 會(huì)將選擇器合并在一起悬秉，形成組合選擇器。

5. 占位符

Sass 中的占位符 %placeholder 功能是一個(gè)很強(qiáng)大冰蘑，很實(shí)用的一個(gè)功能和泌。
他可以取代以前 CSS 中的基類造成的代碼冗余的情形。
因?yàn)?%placeholder 聲明的代碼祠肥，如果不被 @extend 調(diào)用的話武氓，不會(huì)產(chǎn)生任何代碼。

sass-zhanweifu

從編譯出來(lái)的 CSS 代碼可以看出，通過(guò) @extend 調(diào)用的占位符县恕，編譯出來(lái)的代碼會(huì)將相同的代碼合并在一起东羹，讓你的代碼變得更為干凈。

6. 混合宏 VS 繼承 VS 占位符

• Sass 中的混合宏使用

  總結(jié)：編譯出來(lái)的 CSS 清晰告訴了大家忠烛，他不會(huì)自動(dòng)合并相同的樣式代碼属提，如果在樣式文件中調(diào)用同一個(gè)混合宏，會(huì)產(chǎn)生多個(gè)對(duì)應(yīng)的樣式代碼美尸，造成代碼的冗余冤议，這也是 CSSer 無(wú)法忍受的一件事情。不過(guò)他并不是一無(wú)事處师坎，他可以傳參數(shù)恕酸。

  個(gè)人建議：如果你的代碼塊中涉及到變量，建議使用混合宏來(lái)創(chuàng)建相同的代碼塊胯陋。

• Sass 中繼承

總結(jié)：使用繼承后尸疆，編譯出來(lái)的 CSS 會(huì)將使用繼承的代碼塊合并到一起，通過(guò)組合選擇器的方式向大家展現(xiàn)惶岭。這樣編譯出來(lái)的代碼相對(duì)于混合宏來(lái)說(shuō)要干凈的多寿弱，也是 CSSer 期望看到。但是他不能傳變量參數(shù)按灶。

個(gè)人建議：如果你的代碼塊不需要傳任何變量參數(shù)症革，而且有一個(gè)基類已在文件中存在，那么建議使用 Sass 的繼承噪矛。

• 占位符

  總結(jié)：編譯出來(lái)的 CSS 代碼和使用繼承基本上是相同，只是不會(huì)在代碼中生成占位符 mt 的選擇器铺罢。那么占位符和繼承的主要區(qū)別的脉漏，“占位符是獨(dú)立定義禁添，不調(diào)用的時(shí)候是不會(huì)在 CSS 中產(chǎn)生任何代碼虱朵；繼承是首先有一個(gè)基類存在跳纳，不管調(diào)用與不調(diào)用铣揉，基類的樣式都將會(huì)出現(xiàn)在編譯出來(lái)的 CSS 代碼中饶深。”

混合宏 VS 繼承 VS 占位符

7. 插值

{}

可構(gòu)建屬性逛拱、選擇器、@extend 中台猴；
不能在 Sass 變量朽合、@include 中調(diào)用俱两。

sass-chazhi

8. 注釋

• 單行注釋

  類似 JavaScript 的注釋方式，使用“//”

  在編譯出來(lái)的 CSS 中不會(huì)顯示

• 多行注釋

  類似 CSS 的注釋方式曹步，使用 ”/* ”開頭宪彩，結(jié)尾使用 ”*/ ”

  在編譯出來(lái)的 CSS 顯示

運(yùn)算

1. 加/減

攜帶單位類型要一致。

sass-add

in 是英寸讲婚。8in 即 8英寸尿孔。
1英寸約等于 2.54厘米,1英寸大約是96像素
width: 20px + 8in;
8in = 8 * 96px = 768px
即width = 20px + 768px = 788px;

2. 乘

進(jìn)行乘法運(yùn)算時(shí)，兩個(gè)值單位相同時(shí)筹麸，只需要為一個(gè)數(shù)值提供單位即可活合。

乘法運(yùn)算和加法、減法運(yùn)算一樣物赶，在運(yùn)算中有不同類型的單位時(shí)白指，也將會(huì)報(bào)錯(cuò)。

3. 除

規(guī)則 通 乘法運(yùn)算酵紫，有一個(gè)特殊之處：“/” 符號(hào)在 CSS 中已做為一種符號(hào)使用告嘲。因此在 Sass 中做除法運(yùn)算時(shí)，直接使用 “/” 符號(hào)做為除號(hào)時(shí)奖地，將不會(huì)生效橄唬，編譯時(shí)既得不到我們需要的效果，也不會(huì)報(bào)錯(cuò)参歹。

p {
    font: 10px/8px;             // 純 CSS轧坎，不是除法運(yùn)算

    $width: 1000px;
    width: $width/2;            // 使用了變量，是除法運(yùn)算

    width: round(1.5)/2;        // 使用了函數(shù)泽示，是除法運(yùn)算

    height: (500px/2);          // 使用了圓括號(hào)缸血，是除法運(yùn)算

    margin-left: 5px + 8px/2px; // 使用了加（+）號(hào)，是除法運(yùn)算
}

編譯之后

p {
    font: 10px/8px;
    width: 500px;
    height: 250px;
    margin-left: 9px;
}

如果兩個(gè)值帶有相同的單位值時(shí)械筛，除法運(yùn)算之后會(huì)得到一個(gè)不帶單位的數(shù)值捎泻。

sass-chu

4. 顏色運(yùn)算

所有算數(shù)運(yùn)算都支持顏色值，并且是分段運(yùn)算的埋哟。也就是說(shuō)笆豁，紅、綠和藍(lán)各顏色分段單獨(dú)進(jìn)行運(yùn)算赤赊。
也能將數(shù)字和顏色值 一起運(yùn)算闯狱，同樣也是分段運(yùn)算的。

sass-yunsuan

計(jì)算公式為：

01 + 04 = 05抛计、02 + 05 = 07 和 03 + 06 = 09哄孤， 并且被合成。
01 * 2 = 02吹截、02 * 2 = 04 和 03 * 2 = 06瘦陈， 并且被合成凝危。

5. 字符運(yùn)算

在 Sass 中可以通過(guò)加法符號(hào)“+”來(lái)對(duì)字符串進(jìn)行連接。

sass-zifuchuan

除了在變量中做字符連接運(yùn)算之外晨逝，還可以直接通過(guò) +蛾默，把字符連接在一起。

div {
  cursor: e + -resize;
}

// 編譯之后
div {
  cursor: e-resize;
}

注意捉貌，如果有引號(hào)的字符串被添加了一個(gè)沒有引號(hào)的字符串 （也就是支鸡，帶引號(hào)的字符串在 + 符號(hào)左側(cè)）， 結(jié)果會(huì)是一個(gè)有引號(hào)的字符串趁窃。 同樣的牧挣，如果一個(gè)沒有引號(hào)的字符串被添加了一個(gè)有引號(hào)的字符串 （沒有引號(hào)的字符串在 + 符號(hào)左側(cè)）， 結(jié)果將是一個(gè)沒有引號(hào)的字符串棚菊。

sass-zifuchuan2

附錄

? Sass 教程 .

? Sass 中文網(wǎng) .

? Sass 中文文檔 .