Sass的學習
第一章：Sass簡介javascript
1、 什麼是CSS預處理器css
定義：CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增長一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。html
通俗的說，CSS預處理器用一種專門的編程語言，進行web頁面的樣式設計，而後再編譯成正常的CSS文件，以供項目使用。CSS預處理器爲CSS增長一些編程特性，無需考慮瀏覽器的兼容性問題。java
例如：你能夠在CSS中使用變量、簡單的邏輯程序、函數等在編程語言中的一些基本特性，可讓你的CSS更加簡潔、適應性強、可讀性更加、更易於代碼的維護。git
2、什麼是Sass?程序員
Sass是一門高於CSS的元語言，它能用來清晰地、結構化的描述文件樣式。有着比普通CSS更強大的功能。github
Sass可以提供更簡潔、更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表。Sass是採用Ruby語言編寫的一款CSS預處理語言，它誕生於2007年，是最大的成熟的CSS預處理語言。web
3、Sass早期爲何不如less普及？編程
雖然縮進式風格能夠有效縮減代碼量，強制規範代碼風格，但它一方面不爲大多數程序接受，另外一方面沒法兼容已有的CSS代碼。因此遠不如LESS普及bootstrap
4、Sass和SCSS有什麼區別？
Sass和Scss實際上是一種東西，咱們平時都稱之爲Sass，二者之間的不一樣之處有兩點：
一、文件擴展名不一樣，Sass是以「.sass」後綴爲擴展名，而SCSS是以‘.scss’後綴爲擴展名
二、語法書寫方式不一樣，Sass是以嚴格的縮進式語法規則來書寫，不帶（{}）和（;）,而SCSS語法書寫和咱們的長沙市語法書寫方式很是相似。
舉例：Sass語法
$font-stack:Helvetica, sans-serif //定義變量
$primary-color:#333 //定義變量
body
font：100% $font-stack
color:$primary-color
SCSS語法
$font-stack:Helvetica, sans-serif ; //定義變量
$primary-color:#333; //定義變量
body{
font：100% $font-stack
color:$primary-color
}
編譯出來的CSS
body{
font:100% Helvetica,sans-serif;
color:#333;
}
5、Sass/SCSS和純CSS寫法差不少嗎？
Sass和CSS寫法有差異：
Sass是基於Ruby寫出來的，因此其延續了Ruby的書寫規範。在書寫時不帶有大括號和分號，其主要是依靠嚴格的縮進方式來控制的
SCSS和CSS寫法無差異：這也是Sass後來愈來愈受大衆喜歡的緣由之一。
第二章：Sass安裝環境
1、MAC 系統
一、確認是否安裝Ruby
二、 打開終端命令，進入 stability下 輸入 ruby -v
若是提示已經安裝ruby 就能夠直接進行Sass安裝了
三、輸入sudo gem install sass 而後回車 自動會安裝
四、能夠輸入sass -v進行檢測sass是否安裝成功
五、還能夠將sass下載到本地，而後輸入sudo gem install +sass路徑進行安裝
2、windows系統
一、首先下載Ruby安裝包 （官網：http://rubyinstaller.org/downloads 下載對應的Ruby版本）
二、Ruby安裝文件下載好後，能夠按應用軟件安裝步驟進行安裝Ruby，建議安裝在C盤下，安裝過程當中選擇第二個選項。
三、安裝完成後，在開始菜單中找到新安裝的Ruby，並啓動Ruby的Command 控制面板
四、安裝sass——有多種方法
1）經過命令安裝Sass
打開電腦的命令終端，輸入下面命令： gem install sass
2）經過Compass來安裝sass
除了使用gem命令來安裝Sass以外，還能夠經過安裝compass來安裝sass。由於Compass是基於Sass開發的一個框架（裏面集成了不少好寫的mixins和Sass函數），也就是說，安裝了Compass,也就安裝好了Sass
一樣在命令終端輸入：sudo gem install sass
3）本地安裝Sass
因爲有時候直接使用上面的命令安裝沒法實現正常安裝（網絡受限緣由），當碰到這種狀況時須要特殊去處理，可使用下面的方法
能夠到Rubygems（官網：http://rubygems.org/）網站上將Sass的安裝包（http://rubygems/sass）下載下來，而後在命令終端輸入：gem install <把下載的安裝包拖到這裏>直接回車便可安裝成功
注：在IOS系統平臺，能夠直接將下載的安裝包拖到‘gem install’後面，若是是在Windows系統，須要手動輸入安裝的文件路徑
4）淘寶RubyGems鏡像安裝 Sass
經過淘寶RubyGems 鏡像安裝Sass，須要經過gem source 命令來配置源，先移除默認的 https://rubygems.org源，而後添加淘寶源 https://ruby.taobao.org源
第一步：移除默認的源：gem sources --remove https://rubygems.org/
第二步：指定淘寶的源：gem sources -a https://ruby.taobao.org/
第三步: 查看指定的源是否是淘寶源：gem sources -l
確保只有ruby.taobao.org 若是無誤以後，執行下面的命令：gem install sass
3、查測Sass及更新
一、查看Sass是否安裝成功
輸入下面命令便可：sass -v
若是終端上顯示Sass 版本，說明sass安裝成功，可使用了
二、更新sass
維護sass的團隊會不斷的爲Sass添加新的功能，那麼如何確保本身已安裝Sass也具備這些新功能呢，只須要輸入命令：gem update sass
看到更新成功的信息，說明已經更新
4、卸載Sass
在長期使用中不免會碰到沒法解決的問題，有時候須要卸載Sass，而後從新安裝Sass，卸載命令：gem uninstall sass
第三章 Sass的語法格式及編譯調試
1、Sass的語法格式
一、Sass的語法格式
這裏說的Sass語法是Sass的最初語法格式，他是經過tab鍵控制縮進的一種語法規則，並且這種縮進要求很是嚴格。另外其不帶有任何的分號和大括號，經常把這種格式成爲Sass老版本，其文件名以「.sass」爲擴展名
二、SCSS語法格式
SCSS是Sass的新語法格式，它和CSS同樣，代碼包裹在一對大括號裏，而且末尾結束處都有一個分號，文件名以「scss」爲擴展名
注意：「.sass」只能使用Sass老語法規則（縮進規則），「.SCSS」使用的是Sass的新語法規則，也就是SCSS語法規則（相似css語法格式）
2、 Sass編譯
Sass編譯有多種方法：
一、命令編譯
指使用電腦中的命令終端，經過輸入Sass指令來編譯Sass。只須要在命令終端輸入：
單文件編譯：
sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
這是對一個單文件進行編譯，若是想對整個項目因此sass文件編譯成css文件，能夠這樣操做
多文件編譯：sass sass/：css/ 此命令表示將項目中「sass」文件夾中全部「.scss」文件編譯成「.css」文件，而且將這些CSS文件都放在項目中「css」文件夾中
缺點及解決辦法：
在實際編譯過程當中，會發現上面的命令只能一次性編譯，每次修改並保存文件以後，都得從新執行一次這樣的命令。因而可使用如下方法：就是在編譯Sass時，開啓「watch」功能，這樣，只要有代碼進行保存修改，都能自動檢測到代碼的變化，而且給你直接編譯出來
sass --watch <要編譯的Sass文件路徑>/style.scss;<要輸出CSS文件的路徑>/style.css
固然，使用sass命令編譯時，能夠帶不少的參數
watch舉例：
假設我本地有一個項目，我要把項目中「bootstrap.scss」編譯出「bootstrap.css」文件，而且把編譯出來的文件放在「css」文件中，我就能夠在命令終端執行：
sass --watch
sass/bootstrap.scss:css/bootstrap.css
一旦個人bootstrsp.scss文件有任何修改，只要我從新保存了修改的文件，命令終端就能檢測並從新編譯出文件；
二、GUI工具編譯
目前較爲流行的GUI界面工具主要有：
1）Koala（http://Koala-app.com/）
2) Compass.app(http://compass.kkbox.com/)
3) Scout (http://mhs.github.io/scout-app/)
4) CodeKit (http://incident57.com/codekit/index.html)
5)Prepros(https://prepros.io/)
相比之下，推薦使用如下兩個
1）Koala（http://Koala-app.com/）
2) CodeKit (http://incident57.com/codekit/index.html)
三、自動化編譯
可使用 Grunt 和Gulp 這兩個東東來配置Sass的編譯，不建議生搬硬套。
3、Sass常見的編譯錯誤
在編譯Sass代碼時經常會碰到一些錯誤，讓編譯失敗，這樣的錯誤有系統形成的也有人爲形成的，但大部分都有誰人爲過失引發編譯失敗
最爲常見的一個錯誤就是字符編譯引發的，在Sass編譯過程當中不支持「GBK」編碼，因此在建立Sass文件時，須要將文件編碼設置爲「utf-8」
另一個錯誤就是路徑中的中文字符引發的，建議在項目中文件命名或者文件目錄命名不要使用中文字符。至於人爲失誤形成的編譯失敗，在編譯過程當中都會有具體的說明，能夠根據編譯提供的錯誤信息進行對應的修改
4、不一樣樣式風格的輸出方法
在Sass中編譯出來的樣式風格能夠按不一樣的樣式風格顯示。主要包括如下幾種：
一、嵌套輸出方式 nested
Sass提供了一種嵌套顯示CSS文件的方式。例如
nav{
ul{
margin:0;
padding:0;
list-style:none;
}
li{
display:inline-block;
}
a{
display: block;
padding:6px 12px;
text-decoration:none;
}
在編譯時帶上參數 --style nested
sass D:\xxw\sass\sass\index.scss:D:\xxw\sass\css\index.css --style nested
編譯出來的CSS樣式風格：
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
二、展開輸出方式 expanded
nav{
ul{
margin:0;
padding:0;
list-style:none;
}
li{
display:inline-block;
}
a{
display: block;
padding:6px 12px;
text-decoration:none;
}
在編譯時帶上參數 --style expanded
這個輸出的CSS樣式風格和nested相似，只是大括號在另起一行，一樣上面的代碼，編譯出來：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
/*# sourceMappingURL=expand.css.map */
三、緊湊輸出方式 compact
nav{
ul{
margin:0;
padding:0;
list-style:none;
}
li{
display:inline-block;
}
a{
display: block;
padding:6px 12px;
text-decoration:none;
}
在編譯時帶上參數 --style compact
該方式適合那些喜歡單行CSS樣式格式的朋友，編譯後的代碼以下：
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
四、壓縮輸出方式 compressed
nav{
ul{
margin:0;
padding:0;
list-style:none;
}
li{
display:inline-block;
}
a{
display: block;
padding:6px 12px;
text-decoration:none;
}
在編譯時帶上參數 --style compressed
壓縮輸出方式會去掉標準的Sass和CSS註釋及空格，也就是壓縮好的CSS代碼樣式風格：
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
編譯出來的CSS樣式風格的選擇徹底是我的喜愛問題，能夠根據本身喜歡的風格選擇參數
一段時間後，你實際就再也不須要寫CSS代碼了，只用寫Sass代碼，在這種狀況下設定輸出格式爲壓縮格式，知道輸出的CSS代碼能夠直接使用便可。
5、Sass的調試
咱們使用Sass都但願能在瀏覽器中直接調試Sass文件，能找到對應的行數，如今這並非一件難事：只要你的瀏覽器支持「sourcemap」功能便可。早一點的版本須要在編譯的時候添加參數「sourcemap」
在Sass3.3版本以上的不須要添加這個參數也能夠
sass --watch D:\xxw\sass\sass\index.scss:D:\xxw\sass\css\test.css
在命令終端，看到以下信息：
Sass is watching for changes. Press Ctrl-C to stop.
write D:\xxw\sass\css\test.css
write D:\xxw\sass\css\test.css.map
說明你能夠在瀏覽器中 sources 下調試你的Sass代碼了
第四章 Sass的基本特性——基礎
1、Sass 聲明變量
定義變量的語法：Sass中聲明變量使用$；
$width:300px;
Sass的變量包括三個部分：
一、聲明變量的符號 $
二、變量名稱
三、賦予變量的值
2、Sass普通變量與默認變量
普通變量：定義以後可在全局範圍內使用
$fontSize:12px;
body{
fint-size:$fontSize
}
編譯以後的CSS代碼：
body{
font-size:12px;
}
默認變量：
sass的默認變量只須要在值後面加上！default便可
$baseLineHeight:1.5!default;
body{
line-height:$baseLineHeight;
}
編譯後的CSS代碼：
body {
line-height: 1.5; }
sass變量的默認變量通常是用來設置默認值，而後根據需求來覆蓋的，覆蓋方式：在默認變量以前從新聲明下變量
$baseLineHeight:2;
$baseLineHeight:1.5!default;
body{
line-height:$baseLineHeight;
}
編譯後的CSS代碼：
body {
line-height: 2; }
注：默認變量的價值在進行組件化開發的時候會很是有用
3、變量的調用
在Sass中聲明瞭變量以後，就能夠在須要的地方調用變量。
好比：定義了以下變量：
$brand-primary:darken(#428bca,6.5%)
!default; //#337ab7
$btn-primary-color:#fff!default;
$btn-primary-bg:$brand-primary !default;
$btn-primary-border:darken($brand-primary,5%)!default;
在按鈕button中調用，能夠按下面方式調用
.btn-primary{
background-color:$btn-primary-bg;
color:$btn-primary-color;
border:$btn-primary-border;
}
編譯出來的CSS：
.btn-primary {
background-color: #337ab7;
color: #fff;
border: #2e6da4; }
4、局部變量和全局變量
先來看一個例子：
$color:orange !default;//定義全局變量（在選擇器、函數、混合宏...的外面定義的變量爲全局變量）
.block{
color:$color;//調用全局變量
}
em{
$color:red;//定義局部變量
a{
color:$color;//調用局部變量
}
}
span{
color:$color;//調用全局變量
}
編譯後的CSS
.block {
color: orange; }
em a {
color: red; }
span {
color: orange; }
根據演示能夠得知，在元素內部定義的變量不會影響其餘元素。如此能夠簡單的理解成：全局變量就是定義在元素外面的變量
除此以外，Sass如今還提供一個！global參數，以後會詳細介紹
全局變量的影子：當在局部範圍內（選擇器內、函數內、混合宏內、、）聲明一個已經存在於全局範圍內的變量時，局部變量就成爲了全局變量的影子。基本上，局部變量只會在局部範圍內覆蓋全局變量
須要聲明變量的狀況：建立變量只適用於感受確實有必要的狀況下。只有知足下述標準時方可建立新變量：
一、該值至少出現了兩次
二、該值至少可能會被更新一次
三、該值全部的表現都和變量有關
基本上沒有理由聲明一個不須要更新或者只在單一地方使用的變量
5、選擇器嵌套
Sass中提供了選擇器嵌套功能，但這並不意味着在Sass中的嵌套是無節制的，由於嵌套的層級越深，編譯出來的CSS代碼的選擇器層級將越深。
選擇器嵌套爲樣式表的做者提供了一個經過局部選擇器嵌套實現全局選擇的方法，Sass嵌套分爲三種：
一、選擇器嵌套
SCSS下代碼：
nav{
a{
color:red;
header &{
color:green;
}
}
}
編譯出的CSS代碼：
nav a {
color: red; }
header nav a {
color: green; }
二、屬性嵌套
Sass中提供了屬性嵌套功能，CSS有一些屬性前綴相同，只是後綴不同，好比：border-top/right,與之相似的還有margin、padding、font等
例子：
.box{
border:{ //注意要寫上冒號：
top:10px;
right:15px;
}
}
編譯出來的CSS代碼：
.box {
border-top: 10px;
border-right: 15px; }
三、僞類嵌套
其實僞類嵌套和屬性嵌套很是相似，只不過須要藉助「&」符號配合使用
例子：
.clearfix{
&:before,
&:after{
content:"";
display:table;
}
&:after{
clear:both;
overflow:hidden;
}
編譯出來的CSS代碼：
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both;
overflow: hidden; }
使用嵌套選擇器存在的問題：
一、將使最終的代碼難以閱讀
二、選擇器越具體則聲明語句越冗長，並且對最近選擇器的引用（&）越頻繁，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高
因此咱們應可能避免選擇器嵌套
8、聲明混合宏
若是你的整個網站中有幾處樣式相似，在Sass中可使用變量來統一處理，可是當你的樣式變得愈來愈複雜，須要重複使用大段樣式時，使用變量就沒法達到目的了。這事，Sass中的混合宏就變得很是有意義
1、聲明混合宏
1)不帶參數混合宏
在Sass中，使用「@mixin」來聲明一個混合宏。如：
@mixin border-radius{
-webkit-border-radius:5px;
border-radius:5px;
}
其中@mixin 是用來聲明混合宏的關鍵詞 ，border-rasius是混合宏的名稱。大括號中爲複雜的樣式代碼
2）帶參數混合宏
除了申明一個不帶參數的混合宏以外，還能夠在定義混合宏時帶有參數，如：
@mixin border-radius($radius:5px){
-webkit-border-radius:$radius;
border-radius:$radius;
}
3)複雜的混合宏
Sass的混合宏還提供更爲複雜的，你能夠在大括號裏面寫上帶有邏輯關係，幫助咱們更好的作事情
@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的混合宏，帶有多個參數，這個時候可使用「...」來代替
9、調用混合宏
在Sass中經過「@include」關鍵詞來調用聲明好的混合宏，例如：
@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; }
10、混合宏的參數
Sass的混合宏有一個強大的功能，能夠傳參，在Sass中傳參主要有如下幾種情形：
1）傳一個不帶值的參數
@mixin border-radius($radius){
-webkit-border-radius:$radius;
border-radius:$radius;
}
在混合宏中定義了一個不帶任何值的參數」$radius「
在調用的時候能夠給這個混合宏傳一個參數值
.box{
@include border-radius(3px);
}
編譯出來的CSS代碼：
.box {
-webkit-border-radius: 3px;
border-radius: 3px; }
2）混合宏的參數——傳一個帶值的參數
在Sass的混合宏中還能夠給混合宏的參數傳一個默認值，例如：
@mixin border-radius($radius:5px){
-webkit-border-radius:$radius;
border-radius:$radius;
}
在調用相似這樣的混合宏時，會多一個機會，若是你頁面中的圓角不少地方都是」3px「，這時候只須要調用默認的混合宏」border-radius「
.btn{
@include border-radius;
}
編譯出來的CSS代碼：
.btn {
-webkit-border-radius: 5px;
border-radius: 5px; }
但有時候，頁面中有些元素的圓角值不同，那麼能夠隨機給混合宏傳值，如：
.btn{
@include border-radius(50%);
}
編譯出來的CSS代碼：
.btn {
-webkit-border-radius: 50%;
border-radius: 50%; }
3）混合宏傳多個參數
Sass混合宏除了能傳一個參數外，還能夠傳多個參數，如：
@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); }
11、混合宏的不足
混合宏在實際編碼中給咱們帶來不少方便之處，特別對於複用重複代碼塊，但其最大的不足之處是：會生成冗餘的代碼塊，如：在不一樣的地方調用一個相同的混合宏時，如：
@mixin border-radius($radius){
-webkit-border-radius:$radius;
border-radius:$radius;
}
.box{
@include border-radius(3px);
margin-bottom:10px;
}
.btn{
@include border-radius(3px);
}
編譯出來的CSS代碼：
.box {
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 10px; }
.btn {
-webkit-border-radius: 3px;
border-radius: 3px; }
上面能夠明顯看出，Sass在調用相同的混合宏時，並不能智能的將相同的樣式代碼塊合併在一塊兒，這是Sass的混合宏最不足之處。
12、Sass的擴展和繼承
在Sass中同CSS同樣，也具備繼承一說，也是繼承類中的樣式代碼塊。在Sass中是經過關鍵詞「@extend」來繼承已存在的類樣式塊，從而實現代碼的繼承。如：
.btn{
border:1px solid #cccccc;
padding:6px 10px;
font-size:14px;
}
.btn-primary{
background-color:#f36;
color:#fff;
@extend .btn;
}
.btn-second{
background-color:orange;
@extend .btn;
}
編譯後的CSS代碼：
.btn, .btn-primary, .btn-second {
border: 1px solid #cccccc;
padding: 6px 10px;
font-size: 14px; }
.btn-primary {
background-color: #f36;
color: #fff; }
.btn-second {
background-color: orange; }
上述能夠看出，在Sass中的繼承，能夠繼承樣式塊中全部樣式代碼，並且編譯出來的CSS會將選擇器合併在一塊兒，造成羣組選擇器：
.btn, .btn-primary, .btn-second {
border: 1px solid #cccccc;
padding: 6px 10px;
font-size: 14px; }
十3、Sass佔位符 %placeholder
Sass 中的佔位符%placeholder功能是一個很強大，很實用的功能，他能夠取代之前CSS中的基類形成的代碼冗餘的情形，由於%placeholder聲明的代碼，若是不被@extend調用的話，不會產生任何代碼，如：
%mt5{
margin-top:5px;
}
%pt5{
padding-top:5px;
}
這段代碼沒有被@extend調用，他並無產生任何代碼塊，只有經過@extend調用纔會產生代碼：
%mt5{
margin-top:5px;
}
%pt5{
padding-top:5px;
}
.btn{
@extend %mt5;
@extend %pt5;
}
.block{
@extend %mt5;
}
span{
@extend %pt5;
}
編譯出來的CSS代碼：
.btn, .block {
margin-top: 5px; }
.btn, .block span {
padding-top: 5px; }
上述能夠看出，經過@extend 調用的佔位符，編譯出來的代碼會將相同的代碼合併在一塊兒。這也是咱們但願看到的效果，也讓代碼變得更爲乾淨
十4、混合宏 VS 繼承 VS 佔位符
| 混合宏 | 繼承 | 佔位符 | |
| 聲明方式 | @mixin | .class | %placeholder |
| 調用方式 | @include | @extend | @extend |
| 使用環境 | 若是相同代碼塊須要在不一樣環境傳遞不一樣的值時，能夠經過混合宏 來定義重複使用的代碼塊。 不足：他不會自動合併相同的樣式代碼，若是在樣式文件中調用同一個 混合宏，會產生多個對應的樣式代碼，形成代碼的冗餘 |
若是相同代碼塊不須要傳遞不一樣的值，而且 此代碼塊已在CSS文件中定義，能夠經過Sass 的繼承來調用已存在的基類。使用繼承將會將調用相同基類的代碼合併在一塊兒 不足：若是基類並不存在於HTML結構時，無論調用與不調用，在編譯出來的CSS中都將產生基類對應的樣式代碼
|
佔位符和繼承基本相似，惟一不一樣的是， 相同代碼塊並無在基類中存在，而是 額外聲明。若是不調用已聲明的佔位符 ，將不會產生任何樣式代碼，若是早不 同選擇器調用佔位符，那麼編譯出來的CSS代碼將會把相同的代碼合併在一塊兒。 |
十7、插值
使用CSS預處理器語言的一個主要緣由是想使用Sass得到一個更好的結構體系。好比：想寫更乾淨的、高效的和麪向對象的CSS。Sass中的插值就是重要的一部分
例子：
$properties:(margin,padding);
@mixin set-value($side,$value){
@each $prop in $properties{
#{$prop}-#{$side}:$value;
}
}
.login-box{
@include set-value(top,14px);
}
@each...in...語句，它可讓變量和屬性工做很完美，上面代碼編譯成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);
注意：#{}語法不是隨處可用，也不能在mixin中調用（注意是調用而不是聲明）插值
幸運的是，能夠經過使用@extend去使用插值
例如：
%update-status{
margin-top:20px;
background:#F00;
}
.selected-status{
font-weight:bold;
}
$flag:"status";
.navigation{
@extend %update-#{$flag};
@extend .selected-#{$flag};
}
編譯出來的CSS代碼：
.navigation {
margin-top: 20px;
background: #F00; }
.selected-status, .navigation {
font-weight: bold; }
十8、Sass註釋
註釋對於一名程序員來講極其重要，良好的註釋能幫助本身或者別人閱讀代碼。在Sass中有兩種註釋方式：
一、相似CSS註釋方式,使用/*開頭*/結尾
二、相似javascript的註釋方式，使用」//「
二者區別：前者在編譯出來的CSS顯示，後者不顯示
十9、Sass數據類型
Sass和javascript語言相似，也具備本身的數據類型，在Sass中包含如下幾種數據類型
數字：如，1，2，13，10px
字符串：有引號字符串和無引號字符串，如，」foo「、」bar「、baj
顏色：如 blue、#04a3f九、rgba(255,0,0,0.5)
布爾型：如，true，false
空值：null
值列表：用空格或逗號分開，如：1.5em 1em 0 2em 、Helvetica、Arial、sans-serif
Sass也支持其餘CSS屬性值，好比：Unicode 範圍或！important聲明。可是Sass不會特殊對待這些屬性值，一概視爲無引號字符串
二10、Sass字符串
SassScript支持CSS的兩種字符類型：
一、有引號字符串,如：」Lucida Grande「
二、無引號字符串，如：sans-serif bold
在編譯CSS文件時不會改變其類型，只有一種狀況例外，使用#{}插值語句時，有引號字符串將被編譯爲五引號字符串，這樣方便了在混合指令中引用選擇器名
@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!";
}
二11、值列表
所謂的值列表是指Sass中如何處理 經過空格或者逗號分隔的一系列的值
獨立的值也被視爲值列表——只包含一個值的值列表
Sass值列表函數賦予了值列表更多功能
一、nth函數 能夠直接訪問值列表中的某一項
二、join函數 能夠將多個值列表連結在一塊兒
三、append函數 能夠在值列表中添加值
四、@each 可以給值列表中每一個項目添加樣式
能夠用（）表示空的列表，這樣不能夠直接編譯成CSS，若是值列表中包含空的值列表或空值，編譯時將清除空值。
第五章 Sass的基本特性——運算
1、加法
在Sass中，運算只是其基本特徵之一。在Sass中能夠作各類數學計算。
首先簡單普及一下CSS中的單位問題：
在寫css的時候最經常使用的長度單位是px(像素)，常常看到的還有em，pt等等，其實css中的長度單位一共有8個，分別是px，em，pt，ex，pc，in，mm，cm。
一、px：像素(Pixel),相對於設備的長度單位，像素是相對於顯示器屏幕分辨率而言的。
譬如，WONDOWS的用戶所使用的分辨率通常是96像素/英寸。而MAC的用戶所使用的分辨率通常是72像素/英寸。
二、em：相對長度單位。相對於當前對象內文本的字體尺寸。
如當前行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
三、pt：點(Point)，絕對長度單位。
四、ex：相對長度單位。相對於字符「x」的高度。此高度一般爲字體尺寸的一半。
如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
五、pc：派卡(Pica)，絕對長度單位。至關於我國新四號鉛字的尺寸。
六、in：英寸(Inch)，絕對長度單位。
七、mm：毫米(Millimeter)，絕對長度單位。
八、cm：釐米(Centimeter)，絕對長度單位。
其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ;
容器的大小咱們常常用px作單位;字體大小(font-size)不少人用px作單位，其實用px作字體單位惟一的致命缺點就是在IE下沒法用瀏覽器字體縮放的功能。
加法運算：是Sass中運算中的一種，在變量或屬性中均可以作加法運算，如：
.box{
width:20px + 8in;
}
編譯出來的CSS代碼：
.box {
width: 788px; }
可是對於攜帶不一樣類型的單位時，在Sass中計算會報錯
2、減法
Sass的減法運算和加法運算相似
.content{
width:$full-width - $sidebar-width;//爲了區分減號與橫線，減數後與被減數前分別加上一空格
}
編譯出來的CSS代碼：
.content {
width: 760px; }
一樣，運算時碰到不一樣類型的單位時，編譯也會報錯，如：px和em進行運算
3、乘法
Sass中的乘法暈運算和前面介紹的加法與減法運算略有不一樣。雖然它可以支持多種單位（如 px，em，%），但當一個單位同時聲明兩個值時會有問題
.box{
width:10px*2px;
}
編譯時候會報錯，若是進行乘法運算時，兩個值單位相同時，只須要爲一個數值提供單位便可。
例如：.box{
width：10px*2;
}
編譯出來的CSS代碼：
.box{
width：20px;
}
Sass的乘法運算和加法、減法運算同樣，在運算中有不一樣類型的單位時，也將會報錯
4、除法
Sass的乘法運算規則也適用於除法運算，不過除法運算還有一個特殊之處。因爲」/「符號在CSS中已作爲一種符號使用，所以在Sass中作除法運算時，直接使用」/「作爲除號時，編譯得不到咱們想要的效果，也不會報錯
因此在進行除法運算時，要在運算的外面加上一小括號（），如：
.box{
width:(100px/2);
}
編譯出來的CSS代碼：
.box {
width: 50px; }
另外，若是」/"符號在已有的數學表達式中時，也會被認做除法符號，如：
.box{
width:100px/2+2in;
}
編譯出來的CSS代碼：
.box {
width: 242px; }
在Sass除法運算中，當用變量進行除法運算時，」/「符號也會被自動識別爲除法，如：
$width:1000px;
$nums:10;
.item{
width:$width/10;
}
.list{
width:$width/$nums;
}
編譯出來的CSS代碼：
.item {
width: 100px; }
.list {
width: 100px; }
綜上所述，」/「符號被看成除法運算符時有如下幾種狀況：
1）若是數值或他的任意部分是存儲在一個變量中或是函數的返回值
2）若是數值被圓括號包圍
3）若是數值是另外一個數學表達式的一部分
Sass的除法運算還有一個狀況，若是兩個值帶有相同的單位值時，除法運算會獲得一個不帶單位的數值如：
.box{
width:(1000px/100px);
}
編譯出來的CSS代碼：
.box {
width: 10; }
5、變量運算
在Sass中除了可使用數值進行運算以外，還可使用變量進行運算，在Sass中使用變量進行運算，這使得Sass的數學運算功能變得更加實用，示例：
$content-width:720px;
$sidebar-width:220px;
$gutter:20px;
.content{
width:$content-width + $sidebar-width +$gutter;
margin:0 auto;
}
編譯出來的CSS代碼：
.content {
width: 960px;
margin: 0 auto; }
6、數字運算
在Sass運算中數字運算是較爲常見的，數字運算包括前面介紹的：加法、減法、乘法和除法運算。並且還能夠經過括號來修改他們的運算前後順序
和咱們的數學運算是同樣的，如：
.box{
width:((220px+720px)-11*20)/12;
}
編譯出來的CSS代碼：
.box {
width: 60px; }
第四章 Sass的基本特性——基礎
- 1. sass學習--什麼是sass
- 2. Sass學習
- 3. SASS學習
- 4. sass學習
- 5. sass我的學習筆記
- 6. SASS/SCSS的學習歸納
- 7. Sass 學習筆記
- 8. sass學習總結
- 9. sass學習筆記
- 10. Sass學習筆記
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • 適用於PHP初學者的學習線路和建議
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. sass學習--什麼是sass
- 2. Sass學習
- 3. SASS學習
- 4. sass學習
- 5. sass我的學習筆記
- 6. SASS/SCSS的學習歸納
- 7. Sass 學習筆記
- 8. sass學習總結
- 9. sass學習筆記
- 10. Sass學習筆記