Sass-學習筆記【基礎篇】

時間 2019-11-26

標籤 sass 學習筆記基礎篇简体版

原文原文鏈接

最下邊附結構圖css

在線編輯器網址以下：http://sassmeister.com/html

注意編寫的時候，符號千萬別用了中文的：、；、。...之類的，會報錯，Sass也轉換不成css。前端

less和sass的區別：linux

博客園文章—http://www.cnblogs.com/wangpenghui522/p/5467560.htmlgit

本章主要內容：變量、混合宏、繼承、佔位、插值、運算、數據類型github

1：定義web

Sass是css預處理器的一種，也是最先的css預處理語言。Sass採用Ruby語言編寫，爲css增長一些編程的特性，無需考慮瀏覽器的兼容性問題。編程

編程特性指：能夠在css中使用變量、簡單地邏輯程序、函數等等在編程語言中的一些基本特性bootstrap

可是，sass沒法兼容已有的css代碼。即sass能夠推導成css，css沒變法反變回去以前的sass。windows

Sass是Css3的語法超級

2：其餘一些css預處理器

Sass（SCSS）
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

3：關於Sass和SCSS之間的不一樣

Sass和SCSS實際上是同一種東西，平時都稱之爲Sass。兩者其實有不一樣

兩個區別點以下

（1）.文件擴展不一樣。

　　Sass用「.sass」後綴爲擴展名；

　　SCSS用「.scss」;

（2）.語法書寫方式不一樣。

　　Sass以嚴格的縮進式語法規則來書寫，不帶大括號「{}」和分號「；」。

　　SCSS的語法書寫和CSS語法書寫方式很是相似。

示例以下：

Sass語法——

$font-stack: Helvetica,sans-serif //定義變量

$primary-color: #333 //定義變量

body

　　font: 100% $font-stack

　　color: $primary-color

可見這種寫法是不帶任何分號和大括號的，並且縮進要求很是的嚴格！

這種格式被稱爲Sass老版本，其文件名以「.sass」爲擴展名

SCSS語法——

$font-stack : Helvetica, sans-serif；

$primary-color: #333；

body{

　　font: 100% $font-stack；

　　color: $primary-color；

}

SCSS是Sass的新語法格式。

SCSS從外觀來看，和css幾乎是如出一轍的。代碼都包裹在一對大括號裏，而且末尾結束的地方都有一個分號。

其文件名格式經常以「.scss」爲擴展名。

兩者編譯出來的css都是

body{

　　font： 100% Helvetica, sans-serif；

　　color： #333；　　

}

接下來學習的都是使用的SCSS語法方式

4：Sass和CSS的寫法差異：

正如Sass和SCSS的區別同樣，

css和SCSS的書寫方式無差異；甚至能夠把現有的css文件直接改成「.scss」均可以直接使用。

css和Sass的區別也是同樣的！

Sass是基於Ruby寫出來的，延續了Ruby的書寫規範。

書寫Sass的時候不帶有大括號和分號，其主要的依靠嚴格的縮進方式來控制;

而css就是有大括號和分號，必不可少；並且縮進方式沒有那麼嚴格的要求，甚至能夠不用縮進。

代碼示例：

Sass寫法

body

　　color： #fff

　　background： #fff

css寫法

body{

　　color:：#fff；

　　background： #fff；

}

5：sass的安裝

安裝sass先要安裝ruby；由於sass是基於ruby的。

ruby安裝包下載地址——Ruby 的官網http://rubyinstaller.org/downloads

慕課教程地址：http://www.imooc.com/video/7743

下載安裝包下一步下一步就好，具體安裝方案看慕課教程；

安裝好ruby後調出命令終端安裝sass

如何調出命令終端？兩步走——

（1）win鍵+r調出「運行」對話框

（2）輸入cmd或者command調出「命令（安裝ruby後的全稱叫作：Start Command Prompt with Ruby）」對話框【因此也能夠根據全稱去「開始」那裏找一下】

在命令終端輸入「ruby-v」能夠檢測ruby是否安裝，（通常狀況下安裝好ruby後，就會有Start Command Prompt with Ruby這個對話框，因此不必檢查）

在命令終端輸入「gem install sass」後，回車來安裝sass

等一會會提示「successfully installed sass-xx版本號」這句話，就表示sass安裝成功；

若不成功，請移步個人另外一篇文章：http://www.cnblogs.com/padding1015/p/7133811.html

更新最新版的sass，一樣在命令行輸入：「gem update sass」便可

刪除sass，一樣在命令行輸入：「gem uninstall sass」便可

注：在安裝sass這裏有些擴展知識，慕課這個老師的視頻教程比較詳盡：http://www.imooc.com/video/7063

2017-06-21 09:17:08

6：sass語法格式

見：第3條第（2）點

可是注意，使用了新格式的書寫方式——即用了SCSS的書寫方式，可是用「.sass」的後綴名就大錯特錯了!

".sass"只能使用Sass的老語法規則（即嚴格的縮進規則，且不帶分號和大括號）

「.scss」使用的是Sass的新語法規則，也就是SCSS語法規則（相似CSS語法格式）

6-2：sass註釋 http://www.imooc.com/video/7063

好的代碼習慣，應當是註釋佔頁面的2/3，這樣維護人員後期維護和升級纔會方便。

sass支持css的註釋語法。

支持

/* * */

和

的註釋方法；

可是，編譯出來的css中，只有/* * */的註釋能夠被編譯出來

介紹一個好的開發習慣：

在sass的宿主文件（即主要存放類名調用sass變量和函數等的文件內）裏，經過一個塊註釋的方式，說明每個被引入文件的做用。

大致就像給html頁面註釋同樣，分幾大模塊。

而後每一個文件分別放到大模塊下邊作註釋

/**

*CONTENTS

*SETINGS

*variables.............................................................變量集中存儲文件

*TOOLS

*COMPONETS

*reset............................................................Compass內置瀏覽器重置樣式文件

*BUSINESS

*BASS

*screen.scss.............................................................針對當前站點主頁的樣式修飾

7：Sass編譯

使用了Sass開發，並不表示就要用link來引入「.sass」文件或者「.scss」文件，

項目文件中仍是隻引用.css文件就好。
Sass做爲一個預處理工具，提早幫你作事情，只有須要他的時候，他纔有功效。
所謂Sass編譯，由於Sass開發以後，要讓web頁面能調用Sass寫好的東西，就得有這麼一個過程，這個過程就稱之爲Sass編譯過程。

Sass編譯的幾種方法：

命令編譯
GUI工具編譯
自動化編譯

——命令編譯：在你電腦的命令終端，輸入Sass指令來編譯Sass，（最直接、最簡單）

作法：

（1）單文件編譯——對一個單文件進行編譯
代碼語法
sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

示例：
例如：本地一個項目中有一個「bootstrap.scss」文件，這個文件是放在sass文件夾下的。
把這個文件「bootstrap.scss」編譯成「bootstrap.css」文件，而且放到該項目的css文件夾下
則命令終端的寫法：
sass sass/bootstrap.scss:css/bootstrap.css
注意中間用冒號（：）轉換。

（2）多文件編譯——將整個項目全部的Sass文件編譯成css文件
代碼語法
sass scss/:css/
解析：命令表示將項目中「sass」文件夾中全部的「.scss」(或者".sass")文件編譯成「.css」文件，
而且將這些css文件放在項目中的css文件夾中。

以上這種寫法的缺點是：
只能編譯一次，下次再用的時候，還得從新編譯。
解決方法：開啓"watch"功能（自動從新編譯）
只要對代碼進行了修改，都能自動檢測到代碼的變化，而且直接編譯出來。

代碼語法：
sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出的CSS文件路徑>/style.css

這樣，像上邊的bootstrap的例子，能夠用watch來修改：
sass --watch sass/bootstrap.scss:css/bootstrap.css
這樣寫的話，一旦更改了bootstrap.scss文件，從新保存後，命令終端就能從新自動編譯css文件

其餘一些使用sass命令編譯可帶的參數
（圖片來自慕課網教程）

——GUI界面工具編譯：能看到的界面操做

幾款GUI界面編譯工具：

Koala (http://koala-app.com/)【開源，支持多個平臺，功能同Codekit相似】
Compass.app（http://compass.kkbox.com/）
Scout（http://mhs.github.io/scout-app/）
CodeKit（https://incident57.com/codekit/index.html）【付費，only Mac】
Prepros（https://prepros.io/）

強烈推薦：

Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)【官網：http://koala-app.com/】

CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

【Koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac

著做權歸做者全部。商業轉載請聯繫做者得到受權,非商業轉載請註明出處。

原文: http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html © w3cplus.com】

——自動化編譯：Grunt和Gulp

見慕課詳解：傳送帶——http://www.imooc.com/code/6380

sass常見的編譯錯誤
（1）字符編碼錯誤
在建立Sass文件的時候，須要將文件編碼設置爲"utf-8"，注意他不支持"GBK"編碼

（2）路徑中的中文字符錯誤
建議在項目中給文件命名或者文件目錄命名不要使用中文字符。

8：Sass不一樣樣式風格的輸出方法

在 Sass 中編譯出來的樣式風格也能夠按不一樣的樣式風格顯示。其主要包括如下幾種樣式風格：

嵌套輸出方式 nested
展開輸出方式 expanded
緊湊輸出方式 compact
壓縮輸出方式 compressed

如下詳解

——嵌套輸出方式 nested

Sass提供了一種嵌套顯示css文件的方式。

代碼演示：

nav{

　　ul{

　　　　margin： 0；

　　　　padding： 0；

　　　　list-style： none；

　　}

　　li{display: inline-block;}

}

而後在編譯的時候帶上參數"--style nested";

如：

sass --watch test .sass：test.css --style nested

編譯出來的css樣式風格：

nav ul{

　　margin: 0;

　　padding: 0;

　　listy-style: none;}

nav li{

　　display: inline-block;}

nested：閉合的大括號在最後一行的後邊，不會另起一行；

——展開輸出方式 expanded

所謂展開輸出，就是最後的大括號會另起一行，最終格式和nested差很少；

如，.scss文件中這麼寫：

nav{

　　ul{

　　　　margin: 0;

　　　　padding: 0;

　　　　listy-style: none;

　　}

　　li{display: inline-block;}

}

在編譯的時候要帶上參數「--style expanded」;

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

輸出的css樣式爲：

nav ul{

　　margin: o;

　　padding: 0;

　　list-style: none;

}

nav li{

　　display: inline-block;

}

大括號另起一行。輸出的css樣式風格和nested相似；也是經常使用的css展開版樣式風格

——緊湊輸出方式 compact

sass代碼示例

nav{
　　ul{
　　　　margin: 0;
　　　　padding: 0;
　　　　list-style: none;
　　}
}
　　li{
　　　　display: inline-block;
　　}
}

在編譯的時候帶上參數"--style compact";

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

css樣式風格就會是變成單行css，以下：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }

——壓縮輸出方式 compressed

sass代碼示例

nav{
　　ul{
　　　　margin: 0;
　　　　padding: 0;
　　　　list-style: none;
　　}
}
　　li{
　　　　display: inline-block;
　　}
}

在編譯的時候帶上參數"--style compressed";

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

css樣式風格:壓縮輸出方式會去掉標準的Sass和CSS註釋及空格，也及時壓縮好的css代碼樣式風格、

以下：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}

一段時間以後，你實際上就再也不須要寫 CSS 代碼了，只用寫 Sass 代碼。在這種狀況下，你只須要設定輸出格式爲壓縮格式，知道輸出的 CSS 代碼能夠直接使用便可。

9：Sass調試

如何在瀏覽器中直接調試Sass文件，並找到對應的行數？

慕課教程地址：http://www.imooc.com/code/6386

-------------------------------------------------------------------Sass的基本特型篇------------------------------------------------------------------------------------

1、Sass聲明變量

變量聲明用"$"符號；語法如圖（慕課：www.imooc.com/code/6950）

示例，給按鈕顏色聲明幾個變量：

$brand-primary:darken(#428bca,6.5%)!default;//#337ab7
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: darken($btn-primary-bg,5%) !default;

！default表示默認值。

2、Sass普通變量和默認變量

-普通變量-

定義以後能夠在全局範圍內使用。

$fontSize:12px;

body{

　　font-size: $fontSize;

}

編譯後的css：

body{

　　font-size: 12px;

}

-默認變量-

sass的默認變量僅需在以後面加上！default便可

$baseLineHeight：1.5 ！default；

body{

　　line-height: $baseLineHeight;

}

編譯後的css代碼：

body{

　　line-height ： 1.5；

}

sass的默認變量通常是用來設置默認值的，而後根據需求來覆蓋的。

覆蓋的方式很是簡單，只須要在默認的變量以前從新聲明一下變量便可。

默認變量的價值在進行組件開發的時候會很是有用。

2017-06-21 13:07:57

如下是幾種普通變量和默認變量的代碼順序和寫法，

用來研究他們之間的關係：

——只有一個普通變量聲明

$baseLineHeight: 2;

body{
line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 2;

}

結論：很正常、最普通的一個寫法

——兩個或多個普通變量聲明

$baseLineHeight: 2;
$baseLineHeight: 3;
body{
line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 3;

}

結論：這種屢次普通聲明的，就好像css同樣，下邊的覆蓋上邊的。最後展現的是最後一行聲明的。

——一個默認變量聲明

$baseLineHeight: 1.5 !default;

body{
line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 1.5;

}

結論：若是變量沒有被賦值，就會被指定成！default的值，!default 表示默認值

——一個默認變量聲明、一個普通變量

$baseLineHeight: 2;

$baseLineHeight: 1.5 !default;

body{
　　line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 2;

}

——一個默認變量聲明、一個普通變量【相反聲明順序】

$baseLineHeight: 1.5 !default;

$baseLineHeight: 2;

body{
　　line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 2;

}

以上兩個加一塊兒來總結結論：

普通變量覆蓋默認變量的，不受普通變量聲明順序的影響，能夠看出，！default聲明的變量優先級要小於普通聲明的。

即便普通聲明在默認變量的上邊，也會顯示普通變量的值。

——一個默認變量聲明、兩個普通變量【主要看覆蓋能力、優先級】

——第一種順序

$baseLineHeight: 1.5 !default;

$baseLineHeight: 3333;

$baseLineHeight: 2;

body{
　　line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 2;

}

——第二種順序

$baseLineHeight: 1.5 !default;

$baseLineHeight: 2;

$baseLineHeight: 33333;

body{
　　line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 33333;

}

——第三種順序

$baseLineHeight: 3333;

$baseLineHeight: 1.5 !default;

$baseLineHeight: 2;

body{
　　line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 2;

}

以上幾個加一塊兒來總結結論：

普通變量覆蓋默認變量且忽視順序，

普通變量之間的覆蓋是：後邊的覆蓋前邊的。

——一個默認變量聲明、一個普通變量、一個加！important的普通變量【檢測important的在這裏是否有用】

$baseLineHeight: 3333333!important;

$baseLineHeight: 1.5 !default;
$baseLineHeight: 2;

body{
line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 2;

}

——【反順序】

$baseLineHeight: 1.5 !default;
$baseLineHeight: 2;

$baseLineHeight: 3333333!important;

body{
line-height: $baseLineHeight;
}

編譯的css爲：

body{

　　line-height: 3333333!important;

}

以上幾個加一塊兒來總結結論：

忽視！important的做用，當成正常的普通變量

3、變量的調用

在Sass中聲明瞭變量以後，在須要的地方調用；

調用的方法，就是把變量名寫在屬性對應的值得地方。

示例：

$width: 200px;

body{

　　width: $width;

}

編譯後的css：

body{

　　width: 200px;

}

4、局部變量和全局變量

Sass變量有做用域這一說。
變量分爲全局變量和局部變量

全局變量：在選擇器、函數、混合宏...的外邊定義的變量爲全局變量，也就是定義在元素外邊的變量。

有時候定義全局變量會加上"!default"符號，表示不設置都適用默認的值，同時優先級低，也容易被局部變量所覆蓋，而不受代碼上下文順序的影響，一舉多得。

局部變量：定義在元素內部的變量，局部範圍內（選擇期內、函數內、混合宏內...）；

局部變量只會在局部範圍內覆蓋全局變量，在元素內部定義的變量不會影響其餘元素

示例：

//SCSS
$color: orange !default;//定義全局變量（這是在選擇器外部定義的）
.block{color: $color;//調用全局變量（這個.block選擇器內沒有再定義同名的$color變量，因此他調用的就是全局變量）}
em{
　　$color: red;//和全局變量"$color"同名，定義了一個局部變量（在選擇器內部定義的）
　　a{
　　　　color: $color;//調用的是em選擇器內部的局部變量。
　　}
}
span{color: $color;//調用全局變量，同.block的調用}

以上代碼的css結果以下：
//CSS
.block{
　　color: orange;
}
em a{
　　color: red;
}
span{
　　color: orange;
}

全局變量的影子：當一個變量已經存在於全局範圍內了，再在局部範圍內聲明瞭和他同名的變量，這個變量就稱做全局變量的影子.

全局變量的影子也就是一種局部變量，其在局部範圍內覆蓋全局變量

以下實例中，$color就是全局變量的影子：
//SCSS
$color: orange !default;//定義全局變量
.block{
　　color: $color;//調用全局變量
}
em{
　　$color: red;//定義局部變量。$color就是全局變量$color的影子
　　a{
　　　　color:$color;//調用局部變量
　　}
}

何時聲明變量？
不要爲了某些駭客行爲而聲明新變量，只有知足全部下述標準時方可建立新變量：

該值至少重複出現了兩次；
該值至少可能會被更新一次；
該值全部的表現都與變量有關（非巧合）。

基本上，沒有理由聲明一個永遠不須要更新或者只在單一地方使用變量。

5、Sass嵌套--選擇器的嵌套

選擇器嵌套功能並不意味着你在 Sass 中的嵌套是無節制的，由於你嵌套的層級越深，編譯出來的 CSS 代碼的選擇器層級將越深，這每每是你們不肯意看到的一點。
選擇器嵌套爲樣式表的做者提供了一個經過局部選擇器相互嵌套實現全局選擇的方法，

Sass 的嵌套分爲三種：

選擇器嵌套

屬性嵌套

僞類嵌套

（1）選擇器嵌套

示例：

假設咱們有一段這樣的結構：

<header>
<nav>
    <a href=「##」>Home</a>
    <a href=「##」>About</a>
    <a href=「##」>Blog</a>
</nav>
<header>

想選中 header 中的 a 標籤，在寫 CSS 會這樣寫：

nav a {
  color:red;
}

header nav a {
  color:green;
}

那麼在 Sass 中，就可使用選擇器的嵌套來實現：

nav {
  a {
    color: red;

    header & { //注意這個連接符
      color:green;
    }
  }  
}

"&":做用就是鏈接以前(或以後，根據使用位置不一樣其效果不一樣)的選擇器（僞類嵌套那裏也會用到，一看便明白）

header & == header nav a

（2）屬性嵌套

Sass 中還提供屬性嵌套，CSS 有一些屬性前綴相同，只是後綴不同，

好比：border-top/border-right，與這個相似的還有 margin、padding、font 等屬性。假設你的樣式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中咱們能夠這樣寫：

.box {
  border :  { //注意這個冒號(：)千萬不能丟掉，否則是錯誤的，翻譯出來就是.box border{}至關於選擇器的嵌套了
   top: 1px solid red;
   bottom: 1px solid green;
  }
}
再好比：
你須要

.box {
     font-size: 12px;
     font-weight: bold;
}
你能夠這麼寫：

　　.box {
　　　　font: {
　　　　　　size: 12px;
　　　　　　weight: bold;
　　　　}
　　}

（3）僞類嵌套

其實僞類嵌套和屬性嵌套很是相似，只不過他須要藉助`&`符號一塊兒配合使用。咱們就拿經典的「clearfix」爲例吧：

 1 .clearfix{
 2 &:before,
 3 &:after {
 4     content:"";
 5     display: table;
 6   }
 7 &:after {
 8     clear:both;
 9     overflow: hidden;
10   }
11 }

編譯出來的 CSS：

1 clearfix:before, .clearfix:after {
2   content: "";
3   display: table;
4 }
5 .clearfix:after {
6   clear: both;
7   overflow: hidden;
8 }

避免選擇器嵌套：

選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發者須要花費巨大精力計算不一樣縮進級別下的選擇器具體的表現效果。
選擇器越具體則聲明語句越冗長，並且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這很是不值得。

爲了防止此類狀況，咱們應該儘量避免選擇器嵌套。

Sass函數有兩種：

1、sass內置函數——跟代碼塊無關，稱爲functions。全部內置函數知識見進階篇文章：【Sass-學習筆記【進階篇】】http://www.cnblogs.com/padding1015/articles/7063242.html

2、可重用的代碼塊 ——mixin：可重用的代碼塊，能夠看作是Sass中的函數，

在Sass中，用"@mixin"來聲明一個混合宏。

六：Sass混合宏

變量是用來處理小段相似的樣式代碼的，若涉及到大量大段重複的樣式時，則須要用Sass中的「混合宏」。
（變量就像js中的一個數值，而混合宏就像js中的一個數組。）

1.聲明混合宏@mixin

不帶參數的混合宏
@mixin border-radius{
　　-webkit-border-radius: 5px;
　　-moz-border-radius: 5px;
　　border-radius: 5px;
}

其中，@mixin是用來聲明混合宏的關鍵詞，有點相似CSS中的@media、@font-face同樣。
border-radius是混合宏的名稱
{}裏邊是能夠複用的樣式代碼。

帶參數的混合宏（在定義混合宏的時候，帶上參數。就像js的function(參數1){}同樣）
@mixin border-radius($radius:5px){
　　-webkit-border-radius: $radius;
　　-moz-border-radius:$radius;
　　border-radius:$radius;
}

複雜的混合宏：
（能夠在大括號裏寫上帶有邏輯關係的代碼，作更多的事。）
@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);
　　}
}

這個box-shadow的混合宏，帶有多個參數，這個時候可使用"..."來代替。
大括號中，當$shadow的參數數量值大於或等於1時，表示有多個陰影值，反之調用默認的參數值"0 0 4px rgba(0,0,0,.3)".

2.調用混合宏@include

在實際調用中，其匹配了一個關鍵詞「@include」來調用聲明好的混合宏。

例如在你的樣式中定義了一個圓角的混合宏「border-radius」:

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

在一個按鈕中要調用定義好的混合宏「border-radius」，能夠這樣使用：

button {
    @include border-radius;
}

這個時候編譯出來的 CSS:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

3.混合宏的傳參

A) 傳一個不帶值的參數

在混合宏中，能夠傳一個不帶任何值的參數，好比：

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在混合宏「border-radius」中定義了一個不帶任何值的參數「$radius」。

在調用的時候能夠給這個混合宏傳一個參數值：

.box {
  @include border-radius(3px);
}

這裏表示給混合宏傳遞了一個「border-radius」的值爲「3px」。

編譯出來的 CSS:

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

B) 傳一個帶值的參數

在 Sass 的混合宏中，還能夠給混合宏的參數傳一個默認值，例如：

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在混合宏「border-radius」傳了一個參數「$radius」，並且給這個參數賦予了一個默認值「3px」。

在調用相似這樣的混合宏時，會多有一個機會，假設你的頁面中的圓角不少地方都是「3px」的圓角，那麼這個時候只須要調用默認的混合宏「border-radius」:

.btn {
  @include border-radius;
}

編譯出來的 CSS:

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

但有的時候，頁面中有些元素的圓角值不同，那麼能夠隨機給混合宏傳值，如：

.box {
  @include border-radius(50%);//在調用的時候再進行傳值。
}

編譯出來的 CSS:

.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

C)傳多個帶值的參數

Sass 混合宏除了能傳一個參數以外，還能夠傳多個參數，多個參數用逗號隔開，其實照js的說法，參數也就是一個變量，也就是在括號中設了幾個變量先傳到大括號中。如：

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

在混合宏「center」就傳了多個參數。在實際調用和其調用其餘混合宏是同樣的，多個參數值之間也用逗號隔開：

.box-center {
  @include center(500px,300px);
}

編譯出來 CSS:

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

有一個特別的參數「…」。當混合宏傳的參數過多之時，可使用參數來替代，如：

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

在實際調用中：

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

編譯出來的CSS:

.box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); }

好比，我本身作了一個實驗：

@mixin gg($ma,$cs...){
　　margin: $ma;
　　box-sahdow: $cs;

}

.cs{
　　@include gg(10px 20px 30px 40px,0 0 0 #000,1px 1px 1px #fff);
}

編譯出來的css：

.cs {

　　margin: 10px 20px 30px 40px;

　　box-sahdow: 0 0 0 #000, 1px 1px 1px #fff;

}

結論是：若是有一個參數後邊帶了點點點，那麼，參數傳值後，後邊傳幾個值，都會被這一個參數引用，即引用了這個參數的屬性，也就會把這個參數對應的值後邊的值所有引用走了。

4.混合宏的優缺點

優勢：

　　帶來不少方便之處，特別是對於複用重複代碼塊。

缺點：

　　不足之處是會生成冗餘的代碼塊。在不一樣的地方調用一個相同的混合宏時,並不能智能的將相同的樣式代碼塊合併在一塊兒。

7、[Sass]擴展/繼承@extend

相似css中的屬性繼承

在Sass中也有繼承這一說，也是繼承類中的樣式代碼快。

在sass中是經過關鍵詞"@extend"來繼承已存在的類樣式塊，從而實現代碼的繼承。

以下所示：

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

編譯出來以後：

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
}

從示例代碼能夠看出，在 Sass 中的繼承，能夠繼承類樣式塊中全部樣式代碼，並且編譯出來的 CSS 會將選擇器合併在一塊兒，造成組合選擇器：

.btn, .btn-primary {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

8、[Sass]佔位符 %placeholde

佔位符%placeholder是一個很強大、很實用的功能，他能夠取代css中的基類形成的代碼冗餘的情形。

%placeholder聲明的代碼，若是不被@extend調用的話，不會產生任何代碼。
示例：
%mt5{margin-top：5px；}
%pt5{padding-top：5px;}
經過@extend調用後：
.btn{
　　@extend %mt5;
　　@extend %pt5;
}
.block{
　　@extend %mt5;
　　span{
　　　　@extend %pt5;
　　}
}

編譯出來的CSS

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

從css能夠看出，經過@extend調用的佔位符，編譯出來的代碼會將相同的代碼合併。

9、[Sass]混合宏 VS 繼承 VS 佔位符

「何時用混合宏，何時用繼承，何時使用佔位符？」各有千秋
各有各的優勢與缺點
a) Sass 中的混合宏使用

//SCSS中混合宏使用
@mixin mt($var){
　　margin-top: $var;
}

.block {
　　@include mt(5px);

　　span {
　　　　display:block;
　　　　@include mt(5px);
　　}
}

.header {
　　color: orange;
　　@include mt(5px);

　　span{
　　　　display:block;
　　　　@include mt(5px);
　　}
}

編譯的css以下：

.block {
　　margin-top: 5px; }

.block span {

   display: block;

   margin-top: 5px; }

.header {

  color: orange;

  margin-top: 5px; }

.header span {

   display: block;

   margin-top: 5px; }

總結：編譯出來的 CSS 清晰告訴了你們，他不會自動合併相同的樣式代碼，若是在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，形成代碼的冗餘，這也是 CSSer 沒法忍受的一件事情。不過他並非一無事處，他能夠傳參數。

我的（慕課老師）建議：若是你的代碼塊中涉及到變量，建議使用混合宏來建立相同的代碼塊。

b) Sass 中繼承

將上面代碼中的混合宏，使用類名來表示，而後經過繼承來調用：

//SCSS 繼承的運用
.mt{
　　margin-top: 5px;
}

.block {
　　@extend .mt;

　　span {
　　　　display:block;
　　　　@extend .mt;
　　}
}

.header {
　　color: orange;
　　@extend .mt;

　　span{
　　　　display:block;
　　　　@extend .mt;
　　}
}

編譯的css以下：

.mt, .block, .block span, .header, .header span {

  margin-top: 5px; }

.block span {

  display: block; }

.header {

  color: orange; }

.header span {

  display: block; }

總結：使用繼承後，編譯出來的 CSS 會將使用繼承的代碼塊合併到一塊兒，經過組合選擇器的方式向你們展示，
好比 .mt, .block, .block span, .header, .header span。
這樣編譯出來的代碼相對於混合宏來講要乾淨的多，也是 CSSer 指望看到。可是他不能傳變量參數。
我的建議：若是你的代碼塊不須要傳任何變量參數，並且有一個基類已在文件中存在，那麼建議使用 Sass 的繼承。
c) 佔位符
將上面代碼中的基類 .mt 換成 Sass 的佔位符格式：

//SCSS中佔位符的使用
%mt{
　　margin-top: 5px;
}

.block {
　　@extend %mt;

　　span {
　　　　display:block;
　　　　@extend %mt;
　　}
}

.header {
　　color: orange;
　　@extend %mt;

　　span{
　　　　display:block;
　　　　@extend %mt;
　　}
}

編譯的css代碼以下：

.block, .block span, .header, .header span {

  margin-top: 5px; }

.block span {

  display: block; }

.header {

  color: orange; }

.header span {

  display: block; }

總結：編譯出來的 CSS 代碼和使用繼承基本上是相同，只是不會在代碼中生成佔位符 mt 的選擇器。
那麼佔位符和繼承的主要區別的，「佔位符是獨立定義，不調用的時候是不會在 CSS 中產生任何代碼；
繼承是首先有一個基類存在，無論調用與不調用，基類的樣式都將會出如今編譯出來的 CSS 代碼中。

表格：

10、[Sass]插值(interpolation)語句#{}

既然這麼麻煩還感受比css複雜了，爲何還用這個？
使用 CSS 預處理器語言的一個主要緣由是想使用 Sass
得到一個更好的結構體系。好比說你想寫更乾淨的、高效的和麪向對象的 CSS

還有一點和字符串有關的：使用插值後，有引號字符串會被編譯成無引號字符串，這樣是爲了方便在混合指令（mixin）中引用選擇其名。

Sass 中的插值(Interpolation)就是重要的一部分。讓咱們看一下下面的例子：

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

它可讓變量和屬性工做的很完美，上面的代碼編譯成 CSS：

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

這是 Sass 插值中一個簡單的實例。當你想設置屬性值的時候你可使用字符串插入進來。

另外一個有用的用法是構建一個選擇器。能夠這樣使用：

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

編譯出來的 CSS:

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

一旦你發現這一點，你就會想到超級酷的 mixins，用來生成代碼或者生成另外一個 mixins。然而，這並不徹底是可能的。第一個限制，這可能會很刪除用於 Sass 變量的插值。

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}

上面的 Sass 代碼編譯出來，你會獲得下面的信息：

error style.scss (Line 5: Undefined variable: 「$margin-".)

因此，#{}語法並非隨處可用，你也不能在 mixin 中調用：

@mixin updated-status {
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.navigation {
    @include updated-#{$flag};
}

上面的代碼在編譯成 CSS 時一樣會報錯：

error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")

幸運的是，可使用 @extend 中使用插值。例如：

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}

上面的 Sass 代碼是能夠運行的，由於他給了咱們力量，能夠動態的插入 .class 和 %placeholder。

固然他們不能接受像 mixin 這樣的參數，上面的代碼編譯出來的 CSS:

.navigation {
    margin-top: 20px;
    background: #F00;
}
.selected-status, .navigation {
    font-weight: bold;
}

11、[Sass]註釋

 在 Sass 中註釋有兩種方式

一、相似 CSS 的註釋方式，使用 」/* 」開頭，結屬使用 」*/ 」

二、相似 JavaScript 的註釋方式，使用「//」

12、[Sass]數據類型

Sass 和 JavaScript 語言相似，也具備本身的數據類型，在 Sass 中包含如下幾種數據類型：

數字: 如，一、二、 1三、 10px；
字符串：有引號字符串或無引號字符串，如，"foo"、 'bar'、 baz；【注：！important被視爲是無引號字符串的一種】
顏色：如，blue、 #04a3f九、 rgba(255,0,0,0.5)；
布爾型：如，true、 false；
空值：如，null；
值列表：用空格或者逗號分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif【這個用多個逗號隔開的無引號字符串，組團起來就是叫作值列表了。】【事實上，獨立的值也被視爲值列表——只包含一個值的值列表。】。


SassScript 也支持其餘 CSS 屬性值（property value），好比 Unicode 範圍，或 !important 聲明。
然而，Sass 不會特殊對待這些屬性值，一概視爲無引號字符串 (unquoted strings)。也就是上邊測試時"！improtant"沒用的緣由


2017-06-21 20:25:25

十3、[Sass]字符串

SassScript支持CSS的兩種字符串類型：

有引號字符串（quoted strings）
無引號字符串（unquoted strings）

在編譯css的時候，不會改變字符串的類型。即以前有引號以後也會有引號。

但有一個例外：

在使用#{ }插值語句時，有引號字符串將被編譯成無引號字符串。這樣是爲了方便在混合指令（mixin）中引用選擇器名。

@mixin firefox-message($selector){

　　body.firefox #{$selector}:before{

　　　　content: "Hi,firefox users!";

　　}

@include firefox-message(".header");

編譯後的css

body.firefox .header:before{

　　content: "Hi,firefox users!"};

由示例能夠看出來，#{$selecotor}這裏插入到是參數$selector，而調用的時候，傳進來的參數是一個帶引號的字符串".header";

可是，通過編譯後，.header的引號沒有了，字符串類型變了。這是爲了組成選擇器而進行的的轉換。

十4、[Sass]值列表

所謂值列表 (lists) 是指 Sass 如何處理 CSS 中：

margin: 10px 15px 0 0

或者：

font-face: Helvetica, Arial, sans-serif

像上面這樣經過空格或者逗號分隔的一系列的值。

分隔方式

空格
逗號

事實上，獨立的值也被視爲值列表——只包含一個值的值列表。

Sass列表函數（Sass list function）賦予了值列表更多的功能，以下是部分

1：nth函數：能夠直接訪問值列表中的某一項

2：join函數：能夠將多個值列表連結在一塊兒

3：append函數：能夠在值列表中添加值

4：@each規則：可以給值列表中的每一個項目添加樣式

值列表中能夠再包含值列表。若是內部一層的值列表和外部層的使用相同的分割方式，那麼要用圓括號包裹內層：

（1px 2px）（5px 6px）表示兩個值列表，而且兩個值列表內部又分別有兩個值列表，這三個大小值列表都是用空格分隔的。

上邊的值列表與 1px 2px 5px 6px 這個值列表在編譯的css中是同樣的。

他們的區別是：

有括號的是包含兩個值列表的值列表，而且兩個值還分別包含兩個值。

後者是包含四個值的值列表。

能夠用（）表示空的列表，這樣不能夠直接編譯成CSS

若是值列表中包含空的值列表或空值，編譯時將清除空值，好比 1px 2px () 3px 或 1px 2px null 3px。

作個試驗：

$bl: 1px 3px 4px ();
.ma{
margin: $bl;
}

編譯結果：

.ma{

　　margin: 1px 3px 4px;}

第二個試驗

$bl: 1px null 5px;
.ma{
margin: $bl;
}

編譯的css：

.ma{

　　margin: 1px 5px;}

十5、[Sass運算]

在 Sass 中能夠作各類數學計算，

Sass 中的數學運算——加法

在變量或屬性中均可以作加法運算。

如：

.box {
  width: 20px + 8in;
}

編譯出來的 CSS:

.box {
  width: 788px;
}

練習：

$sidebar-width: 220px;
$content-width: 720px;
$gap-width: 20px;

.container {
　　width: $sidebar-width + $content-width + $gap-width;
　　margin: 0 auto;
}

編譯的css：

.container {
　　width: 960px;
　　margin: 0 auto;
}

但對於攜帶不一樣類型的單位時，在 Sass 中計算會報錯，以下例所示：

.box {
  width: 20px + 1em;
}

編譯的時候，編譯器會報錯：「Incompatible units: 'em' and ‘px'.」

Sass 中的數學運算——減法

Sass 的減法運算和加法運算相似

示例來作闡述：

$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}

編譯出來的 CSS 以下：

.content {
  width: 760px;
}

一樣的，運算時碰到不一樣類型的單位時，編譯也會報錯，

Sass 中的數學運算——乘法

Sass 中的乘法運算和前面介紹的加法與減法運算還略有不一樣。

他也可以支持多種單位（好比 em ,px , %），

但當一個單位同時聲明兩個值時會有問題。好比下面的示例：

.box {
  width:10px * 2px;  
}

編譯的時候報「20px*px isn't a valid CSS value.」錯誤信息。

若是進行乘法運算時，兩個值單位相同時，只須要爲一個數值提供單位便可。上面的示例能夠修改爲：

.box {
  width: 10px * 2;
}

編譯出來的 CSS:

.box {
  width: 20px;
}

Sass 的乘法運算和加法、減法運算同樣，在運算中有不一樣類型的單位時，也將會報錯。以下面的示例：

.box {
  width: 20px * 2em;
}

編譯時報「40em*px isn't a valid CSS value.」錯誤信息。

練習：

讓icon圖標的background-position的y軸值按20px遞增

$list: twitter,facebook,github,weibo;

@for $i from 1 through length($list){
　　.icon-#{nth($list,$i)}{
　　　　background-postion: 0 -20px * $i;
　　}
}

編譯結果：

　.icon-twitter {

     background-postion: 0 -20px; }

.icon-facebook {

     background-postion: 0 -40px; }

.icon-github {

     background-postion: 0 -60px; }

.icon-weibo {

     background-postion: 0 -80px; }

講解：

第一行準備了一個$list值列表，裏邊放的無引號的字符串，用逗號隔開。是爲了往後的選擇器用的

@for語句，用來遍歷循環執行程序，讓變量 i 在$list的長度中循環。

寫法上：

$i from 1:表示i從1開始循環，【在Sass中，索引值index是從1開始的，和js的從0開始不同】

through length($list):遍歷的範圍或說次數，取決於$list值列表的長度。

這裏，length()是一個函數方法，傳入參數 $list值列表

在大括號中，是遍歷的內容，主要是給.icon-x選擇器分別添加background-position屬性。

而選擇器名字，結合nth函數和變量，在$list列表作了個循環都添加了一遍

#{}插值，把四次循環遍歷出來的列表結果分別插進來

nth($list，$i):是nth函數，傳入兩個參數，第一個是要取值的列表變量名字，第二個是取第幾個的索引值，從1開始【從1開始，特別注意】

屬性值 0 -20px * $i:

0表示x軸的位置是0；

-20px * $i:表示20px遞增，利用乘法運算和for循環遍歷，得出遞增你結果。

另外一種解決方法：

$list: twitter,facebook,github,weibo;

$index: 0;

@each $i in $list {

.　　icon-#{$i}{

　　　　background-postion: 0 - 20px * $index;

　　}

　　$index: $index + 1;

}

最後結果同樣。利用的是index=0;index++;的技巧。

Sass 中的數學運算——除法

Sass 的乘法運算規則也適用於除法運算

即，支持多種單位、符號兩邊的數值不能都帶長度單位（經後邊測試，這句話說法有問題）

/」符號在 CSS 中已作爲一種符號使用。所以在 Sass 中作除法運算時，

直接使用「/」符號作爲除號時，將不會生效，編譯時既得不到咱們須要的效果，也不會報錯。

」/ 」符號被看成除法【自動識別爲除法符】運算符時有如下幾種狀況：

• 若是數值或它的任意部分是存儲在一個變量中或是函數的返回值。【用變量進行除法運算時】

示例：

$width: 1000px;

$nums: 10;

.item{

　　width: $width / 10;

}

或者

.item{

　　width: $width / $ nums;

}

以上兩種都會被自動識別成除法運算。

• 若是數值被圓括號包圍。【除法運算表達式用小括號()包裹】

錯誤示例：

.box{

　　width: 100px / 2; //這種寫法就是錯的，不會報錯可是也解析不出來，特別注意！單單一個除法運算必定記得加括號！必定記得加括號

}

正確寫法：

.box{

　　　width: (100px / 2); //這樣就能正常運算了，得出結果50px

}
• 若是數值是另外一個數學表達式的一部分。【"/"符號在已有的數學表達式中，會被認爲是除法符號】

如：

.box{

　　width: 100px / 2 + 2in; //這種，即便沒有括號也是能夠用的。

}

彙總示例：

//scss

　　font: 10px/8px; //純CSS,不是除法運算

　　$width: 1000px; //聲明一個局部變量

　　width: $width/2; //使用了變量，是除法運算

　　width: round(1.5)/2; //使用了函數，是除法運算

　　heigth：（500px/2）; //使用了圓括號，是除法運算

　　margin-left: 5px + 8px/2px; //使用了加(+)號，是除法運算。【這個可見，除法運算符的兩邊能夠都帶單位,上邊的說法不對】

}

驗證：除法符號兩邊能夠都帶上單位：

.col {
　width: 960px / 10px + 3px;
}

編譯後css：

.col{

　　width: 99px;}

可見，除法符號兩邊能夠都帶上單位。這個之因此最後的結果也是帶單位的（99px），有多是，960px/10px = 96; 96+3px=99px;也就是說最後的單位是由於加號運算纔有的，並非作了除法之後還有單位。

由於原理上說：

若是兩個值帶有相同的單位值時，除法運算以後會獲得一個不帶單位的數值。

實驗

——一個正常的除法運算

.box {
  width: (1000px / 100px);
}

編譯出來的CSS以下：

.box {
  width: 10; //沒有單位
}
——第一次給除法後邊加上加法運算，並給值帶上單位

.box {
  width: (1000px / 100px) + 1px;
}
編譯的css：
.box{
　　width: 11px;}

 ——第二次改變單位
.box{
　　width: (1000px / 100px) + 1em;
}
編譯的css
.box{
　　width: 11em;}
因而可知：確實是由於最後邊的加號運算才讓結果有了單位，而並非除法左右帶單位結果也帶單位。

Sass 中的數學運算——變量計算

在 Sass 中除了可使用數值進行運算以外，還可使用變量進行計算，

簡單的示例：

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;

.container {
  width: $content-width + $sidebar-width + $gutter;
  margin: 0 auto;
}

編譯出來的CSS

.container {
  width: 960px;
  margin: 0 auto;
}

練習題：
計算出每列的列寬

列寬＝單列寬度 x 列數 + 列間距 x (列數 - 1)

$col-width: 60px;
$col-gap: 20px;

@for $i from 1 through 12 {
　　.col-#{$i}{
　　　　width:$col-width * $i + $col-gap * ($i - 1); //注意符號的中英文切換。
　　}
}

Sass 中的數學運算——數字運算

　　數字運算包括前面介紹的：加法、減法、乘法和除法等運算。並且還能夠經過括號來修改他們的運算前後順序。

和咱們數學運算是同樣的，

示例——一個典型的計算 Grid 單列列寬的運算。

.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}

編譯出來的 CSS:

.box {
  width: 60px;
}

Sass 中的數學運算——顏色運算

全部算數運算都支持顏色值，而且是分段運算的。也就是說，紅、綠和藍各顏色分段單獨進行運算。如：

p {
  color: #010203 + #040506;
}

計算公式爲 01 + 04 = 0五、02 + 05 = 07 和 03 + 06 = 09，而且被合成爲：

如此編譯出來的 CSS 爲：

p {
  color: #050709;
}

算數運算也能將數字和顏色值一塊兒運算，一樣也是分段運算的。如：

p {
  color: #010203 * 2;
}

計算公式爲 01 * 2 = 0二、02 * 2 = 04 和 03 * 2 = 06，而且被合成爲：

p {
  color: #020406;
}
我本身作了個練習，結果有點意外：

p{
　　color: #030620 + #233525;
}

最後編譯的css：

p {

  color: #263b45; }
26 和 45 都很正常，3也正常，b從何而來？

 06+35 = 41；能夠分紅 3 11 ；獲得3b
那麼推測是：11 表明的b
由於顏色值就是0-9 a-f這16個，9完了之後a接到後邊，到了b恰好是11；
爲了證明這個推測：
把06的6改爲5,05+ 35 = 40；
能夠想成左右一個數字一個數字地加，左邊0+3，右邊5+5：能夠分紅 3 10；獲得3a
那麼10 表明a

06改爲07——42；能夠分紅3 12；獲得3c
12表明c
以此類推...

07改爲08——43； 能夠分紅3 13；獲得3d
13表明d

08改爲09——44；能夠分紅3 14；獲得3e
14 表明e

接下來，爲了獲得15，左邊09不能再加了，把右邊的35改爲36，——45； 能夠分紅3 15；獲得3f
15表明f
再把36繼續加一，獲得40
總結：數值與字母的對應
10-a
11-b
12-c
13-d
14-e
15-f
加上0-9的順序，a-f就是接到9後邊排序了沒錯。

Sass 中的數學運算——字符運算

同js同樣：在 Sass 中能夠經過加法符號「+」來對字符串進行鏈接

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

編譯出來的CSS：

.box:before {
  content: " Hello Sass! ";
}


注意，若是有引號的字符串被添加了一個沒有引號的字符串 （也就是，帶引號的字符串在 + 符號左側）， 結果會是一個有引號的字符串。 
一樣的，若是一個沒有引號的字符串被添加了一個有引號的字符串 （沒有引號的字符串在 + 符號左側）， 結果將是一個沒有引號的字符串。 
例如：

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

編譯出來的 CSS：

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

 
完2017-06-21 23:12:24 
整整一天，24小時。

最後整理出來一份大綱，是基礎篇的，主要是sass的特性：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。