閱讀目錄

一. Sass安裝

??? 1.1 Ruby安裝

??? 1.2 運行gem命令

??? 1.3 安裝Sass

二. Sass基本用法

??? 2.1 導入

??? 2.2 注釋

??? 2.3 變量

??? 2.4 嵌套

??? 2.5 繼承

??? 2.6 占位符

??? 2.7 混合宏

三. Sass編程

??? 3.1 數學計算

??? 3.2 條件

??? 3.3 循環(huán)

??? 3.4 函數

??? Sass被稱為“CSS預處理器”，就是用一種編程的思想去寫CSS樣式表。在還沒接觸Sass的時候，很多人都不愿意去了解，認為都會了CSS，為什么還要去寫Sass，Sass最終生成的還是CSS文件呀。

??? 最初，我也是這么認為的。

??? 在我認真的學了Sass之后，原來使用Sass對CSS有很大的幫助，對于經常性寫CSS文件的設計師們，節(jié)省了很多的開發(fā)時間，并且可以寫出擴展性更強、更易于維護的代碼。下面是我記錄了Sass的學習筆記。

一. sass安裝

1.1 Ruby安裝

??? 主要針對的是window系統下的安裝，因為Sass依賴于Ruby環(huán)境，所以應先安裝Ruby，Ruby安裝包下載鏈接：http://rubyinstaller.org/downloads/

??? 下載之后，安裝過程中，請勾選Add Ruby executables to your PATH，添加環(huán)境變量。

??? 如果沒有勾選，需在安裝完成之后配置Ruby環(huán)境變量。

??? 在window系統中，新建系統變量RUBY_HOME，存放Ruby安裝路徑（D:\Program Files\Ruby23-x64）。

??? 在系統變量Path中，添加Ruby運行環(huán)境路徑（%RUBY_HOME%\bin），Ruby環(huán)境變量配置完成。

1.2 運行gem命令

??? 安裝完成之后，在開始菜單中找到Ruby，打開Start Command Prompt with Ruby，輸入ruby -v，如果顯示ruby的版本信息，表示安裝成功。

1.3 安裝sass

??? A. 安裝方法一：原配置源安裝

??? 在命令行中直接輸入gem install sass，按回車鍵即可。等待一段時間會提示安裝成功。（因為國內網絡原因，估計會安裝不成功，所以可以FQ或者選擇下面淘寶鏡像安裝）

??? 安裝Sass測試版本 gem install sass –pre

??? 升級Sass版本 gem update sass

??? 查看Sass版本 sass –v

??? 幫助命令行 sass -h

??? B. 安裝方法二：淘寶鏡像安裝

??? 首先移除默認的配置源（https://rubygems.org/），然后添加淘寶鏡像的配置源（https://ruby.taobao.org/），在命令行中輸入

??? gem source --remove https://rubygems.org/?

? ? gem source --add https://ruby.taobao.org/

??? 輸入gem source查看當前的源是否為淘寶鏡像配置源，如果為淘寶源，再輸入gem install sass，等待一段時間，會提示安裝成功。

??? C. 安裝方法三：本地安裝

??? 還可以選擇本地安裝，需要在網上找到Sass的gem文件，下載鏈接：https://rubygems.org/gems/sass

??? 下載之后，存放在任意位置，在命令行中輸入gem install E://sass-3.4.22.gem，安裝路徑，根據自己存放的路徑填寫。

二. Sass基本用法

2.1 導入

??? 我們都知道CSS文件，都有導入功能，@import ‘reset.css’，但是在建站方面，這種導入效果和頁面分別link兩個CSS文件樣式表的效果是一樣的，因為HTTP請求的數目并不會減少。

??? 在Sass中，也有導入功能，如果導入的是CSS文件，@import ‘reset.css’，那效果和CSS文件導入效果是一樣的，它還是以@import存在，并不會合并到編譯后的CSS文件中。Sass導入可以省略.scss后綴名，如果以@import ‘reset’方式導入，會合并到編譯后的CSS文件。一般需要導入的Sass文件是以_開頭命名，如_reset.scss，導入只要引入reset即可。

??? 被導入Sass文件，_a.scss：

$fontSize: 12px;

??? 需要導入樣式的Sass文件，b.scss：

@import 'a'; body {font-size: $fontSize; }

??? 編譯后的CSS樣式：

body {font-size: 12px; }

2.2 注釋

??? Sass文件添加注釋有兩種方式：

??? /* 這是注釋 */

??? 這種方式和CSS文件中的注釋是一樣的。如果在壓縮模式下使用這種注釋方式，那么在最終生產的CSS文件中注釋將會被刪除。但如果不用壓縮輸出方式，注釋將保留在CSS文件中。

??? // 這是注釋

??? Sass有可以用兩條正斜杠表示單行注釋，這和JavaScript、Java文件的單行注釋方式相同。這種方式的注釋，不會顯示在輸出的CSS文件中。??

2.3 變量

??? Sass中定義變量的語法是：美元符號、變量名、冒號、變量值。

??? A.普通變量 $variable-name: value;

$colorMain: orange; a {color: $colorMain; }

??? 編譯后的CSS樣式：

a {color: orange; }

??? B.默認變量 $variable-name: value !default;

$fontSize: 13px !default; body {font-size: $fontSize; }

??? 編譯后的CSS樣式：

??? 如果需要改變默認變量，在默認變量前面，重新賦值即可。（！default標識告訴Sass，只有在沒有其他值賦值的情況下才使用默認值。）

$fontSize: 12px; $fontSize: 13px !default; body {font-size: $fontSize; }

??? 編譯后的CSS樣式：

body {font-size: 12px; }

??? C.多值變量 $variable-name: value1 value2 value3;

??? Sass可以定義多值變量， 多值變量可以分為list類型和map類型，對應于JavaScript的數組和對象。

??? list類型變量，是以空格，逗號或者括號來分割多個值，可用nth($list, n)函數來取值。

$colorLink: #222 $colorMain; //第一個為默認顏色值，第二個為鼠標滑過顏色值 a {color: nth($colorLink, 1);&:hover {color: nth($colorLink, 2);} }

??? 編譯后的CSS樣式：

a {color: #222; } a:hover {color: orange; }

??? 上面這部分類似為一維數組的定義和使用，下面為多維數組：

$px: 20px 15px, 15px 20px; //二維數組

??? 或者用括號來分割：

$px: (20px 15px) (15px 20px); //二維數組

??? map類型變量，是以key-value成對定義的，其中value值又可以為普通變量或者list變量。格式為：$map(key1: value1, key2: value2, key3: value3)，可用map-get($map, $key)來取值。

$heading: (h1: 20px, h2: 16px, h3: 13px); body {font-size: map-get($heading, h3); }

??? 編譯后的CSS樣式：

body {font-size: 13px; }

2.4 嵌套

??? 嵌套語法是：選擇器，左大括號，屬性-值對，右大括號。在多值變量的時候，我們用到了一個&這樣的符號，指的是父元素選擇器，在嵌套偽選擇器的時候經常用到。（在使用嵌套的時候要注意，盡量不要超過三層。）

div {background: $colorMain;a {color: #fff; text-decoration: none;&:hover, &:active {text-decoration: underline;}} }

??? 編譯后的CSS樣式：

div {background: orange; } div a {color: #fff;text-decoration: none; } div a:hover, div a:active {text-decoration: underline; }

??? 在上面我們講述的是選擇器的嵌套，在Sass中，還有一種屬性嵌套：

.div {background: {image: url("img/img_01.png");repeat: no-repeat;position: center;}border: {style: solid;color: $colorMain;left: {width: 5px;}right: {width: 2px;}} }

??? 編譯后的CSS樣式：

.div {background-image: url("img/img_01.png");background-repeat: no-repeat;background-position: center;border-style: solid;border-color: orange;border-left-width: 5px;border-right-width: 2px; }

??? 注意：屬性嵌套書寫時，一定不要忘了屬性后面所跟的冒號：。在對div的背景定義上，其實背景直接可以寫為background: url(“img/img_01.png”) no-repeat center，不用像上面那么麻煩，所以在寫樣式的時候，也要注意減少不必要的麻煩。

2.5 繼承

??? 使用@extend命令可讓任何元素繼承其他樣式定義好的屬性和值。如果有好幾個元素有共同的樣式屬性，這種情況可使用@extend命令。

.div {background: $colorMain;padding: 20px; } .div-01 {@extend .div;border: 2px solid #eee; } .div-02 {@extend .div;border: 2px solid #ccc; }

??? 編譯后的CSS樣式：

.div, .div-01, .div-02 {background: orange;padding: 20px; } .div-01 {border: 2px solid #eee; } .div-02 {border: 2px solid #ccc; }

2.6 占位符

??? 占位符與繼承@extend命令一起使用，有些情況下，一些代碼只是用來做擴展用，就可以用占位符選擇器，以此來減少冗余代碼。以繼承的例子來，只需將開頭的.div換為%div即可。這樣在生成的CSS文件中就不會有.div的樣式。

%div {background: $colorMain;padding: 20px; } .div-01 {@extend %div;border: 2px solid #eee; } .div-02 {@extend %div;border: 2px solid #ccc; }

??? 編譯后的CSS樣式：

.div-01, .div-02 {background: orange;padding: 20px; } .div-01 {border: 2px solid #eee; } .div-02 {border: 2px solid #ccc; }

2.7 混合宏

??? 混合宏以@mixin命令聲明，基本語法是：@mixin mixin-name($parameter) {…: $parameter}，混合宏既可以不傳遞參數，也可以有參數，并且可以是單個，也可以有多個參數。Compass提供了許多現成的混合宏。

??? A.無參數混合宏

??? 無參數混合宏相當于繼承，可以直接用繼承代替。

@mixin center-block {margin-left: auto;margin-right: auto; } .div {@include center-block; }

??? 編譯后的CSS樣式：

.div {margin-left: auto;margin-right: auto; }

??? B.有參數的混合宏

??? 以圓角為例（通常在定義混合宏的參數時，都會設定一個默認值，當然，也可以不設定。）：

@mixin border-radius($radius: 4px) {-moz-border-radius: $radius;-webkit-border-radius: $radius;-o-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius; } .div {@include border-radius(5px); }

??? 編譯后的CSS樣式：

.div {-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px;-ms-border-radius: 5px;border-radius: 5px; }

??? C.多個參數混合宏

??? 對于#{$direction}，可能有點陌生，這是變量的一種特殊使用方法，在字符串中使用，用#{}包含變量。

@mixin border-direction-radius($direction: top-left, $radius: 4px) {-moz-border-#{$direction}-radius: $radius;-webkit-border-#{$direction}-radius: $radius;-o-border-#{$direction}-radius: $radius;-ms-border-#{$direction}-radius: $radius;border-#{$direction}-radius: $radius; } .div {@include border-direction-radius(top-left, 5px) }

??? 編譯后的CSS樣式：

.div { -moz-border-top-left-radius: 5px;-webkit-border-top-left-radius: 5px;-o-border-top-left-radius: 5px;-ms-border-top-left-radius: 5px;border-top-left-radius: 5px; }

??? D.多組值參數

??? 如果一個參數可以有多組值，如box-shadow，transition等，那么參數則需要在變量后加三個點表示，如：$variables… 。以box-shadow為例，box-shadow: h-shadow v-shadow blur spread color inset，都指的是box-shadow: 水平偏量 垂直偏量 模糊值 陰影擴散值 陰影的顏色 inset值。

@mixin box-shadow ($shadow...){-moz-box-shadow: $shadow;-webkit-box-shadow: $shadow;-o-box-shadow: $shadow;-ms-box-shadow: $shadow;box-shadow: $shadow; } .div {@include box-shadow(1px 1px 2px 0px gray, 0px 1px 0px 1px lighten(gray, 0.5)); }

??? 編譯后的CSS樣式：

.div {-moz-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;-webkit-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;-o-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;-ms-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; }

?

---

三. Sass編程

3.1 數學計算

??? Sass可進行加、減、乘、除計算。注意，進行計算時，數值的單位必須一致，并且運算符號最好兩邊都有一個空格，以免計算出錯。

??? A.加法

$widthContainer: 1200px; $widthLeft: 20%; $widthRight: 80%; .div {width: $widthLeft + $widthRight; }

??? 編譯后的CSS樣式：

.div {width: 100%; }

??? B.減法

.div {width: $widthRight - $widthLeft; }

??? 編譯后的CSS樣式：

.div {width: 60%; }

??? C.乘法

??? 在計算乘法的時候要注意，當相乘時，如果值后面都帶單位，會出現問題。

.addition {width: 20px * 40px; }

??? 編譯時，報錯：

800px*px isn't a valid CSS value.

??? 如果只給一個值帶單位，就正常了

.addition {width: 20 * 40px; }

??? 編譯后的CSS樣式：

.addition {width: 800px; }

??? D.除法

??? 在計算除法的時候，跟乘法一樣，只需要一個值帶單位即可，并且表達式放在括號內，才能正常使用。

.addition {width: 80% / 20%; }

??? 對此，編譯之后，在CSS中，是沒有意義的

.addition {width: 80% / 20%; }

??? 如果使用括號：

.addition {width: (80% / 20); }

??? 編譯之后的CSS樣式：

.addition {width: 4%; }

3.2 條件

??? @if和@else if控制命令，舉個簡單例子：

$div: left; .div {@if $div == left {float: left;}@else if $div == right {float: right;} }

??? 編譯后的CSS樣式：

.div {float: left; }

3.3 循環(huán)

??? @for循環(huán)命令，有兩種形式：@for $variable from startNum to endNum，和@for $variable from startNum through endNum，startNum表示起始值，endNum表示結束值，關鍵字to循環(huán)時不包括endNum這個數，through循環(huán)時包括endNum這個數。

@for $i from 1 through 3 {.div-#{$i} { width: 100px * $i; } }

??? 編譯后的CSS樣式：

.div-1 {width: 100px; } .div-2 {width: 200px; } .div-3 {width: 300px; }

??? @for $variable from startNum to endNum：

@for $i from 2 to 4 {.div-#{$i} {width: 100px * $i;}}

??? 編譯后的CSS樣式：

.div-2 {width: 100px; } .div-3 {width: 200px; }

??? @each循環(huán)命令，基本語法是：@each $variable in list/map，list/map表示list類型或者map類型變量。

??? A.循環(huán)list類型變量

@each $list in a,b,c {.#{$list} {background-image: url("img/#{$list}.png");} }

??? 編譯后的CSS樣式：

.a {background-image: url("img/a.png"); } .b {background-image: url("img/b.png"); } .c {background-image: url("img/c.png"); }

??? 多組值的循環(huán)：

$listData: (a, no-repeat, left top) (b, no-repeat, left bottom); @each $name, $repeatType, $sizeType in $listData {.#{$name} {background-image: url("img/#{$name}.png");background-repeat: $repeatType;background-position: $sizeType;} }

??? 編譯后的CSS樣式：

.a {background-image: url("img/a.png");background-repeat: no-repeat;background-position: left top; } .b {background-image: url("img/b.png");background-repeat: no-repeat;background-position: left bottom; }

??? B.循環(huán)map類型變量

$headings: (h1: 20px, h2: 16px, h3: 13px); @each $header, $size in $headings {#{$header} {font-size: $size;} }

??? 編譯后的CSS文件：

h1 {font-size: 20px; } h2 {font-size: 16px; } h3 {font-size: 13px; }

3.4函數

??? Sass提供了好多現成的函數，我們也可以自己定義函數，用@function命令定義函數，@return定義函數返回值。

@function func() {@return 13px; } body {font-size: func(); }

??? 編譯之后的CSS樣式：

body {font-size: 13px; }

?

相關鏈接：Sass關于顏色函數的樂趣

---

轉載于:https://www.cnblogs.com/ylliap/p/6078141.html

總結

以上是生活随笔為你收集整理的Sass学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。