關於sass的基礎語法介紹

注：主要做爲記錄用

前言：

　　 sass是css預編譯工具中的一種，結合compass使用能夠大大加快css開發的速度，同時也能夠解決一些css開發裏比較難受的點。使用sass可使css的開發對編程人員更友好。

安裝和使用:

　　 sass基於ruby，首先須要去ruby官網下載安裝ruby。ruby下載地址.

　　　下載安裝過程很簡單，記得勾選添加到PATH。以後就能夠在命令行裏經過 ruby -v 來查看是否安裝成功。

　　　而後就可使用gem包管理工具了 由於容易被牆 須要換源：

　　　　gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

　　　可能會碰到SSL證書問題， 改成 http://gems.ruby-china.org/

　　　以後用gem install sass 安裝sass

　　　同時能夠用gem install compass 安裝compass

　　　成功後就可使用了，能夠在一個目錄下，使用 compass create projectName 來新建一個sass項目

　　　而後使用 compass watch能夠監聽而且實時reload項目 獲得編譯後輸出的css文件。

　　　關於cpmpass的使用會在以後總結。先來說講Sass。

 

Sass語法：

　　注： sass由於歷史緣由存在scss以及sass兩種文件後綴名，採用了不一樣的語法。sass使用縮進來進行嵌套，語法簡潔開發高效，可是很是用者難以閱讀。scss語法相似css的嵌套，方便閱讀，本文均採用scss。
本文的介紹按照經常使用程度來，只記錄了一些經常使用核心功能，詳細介紹請閱讀官方文檔

　　變量：

　　　　抽象出網頁上須要複用的樣式，定義成變量。

　　　　變量像這樣： $screen-ff: Arial;

　　　　使用變量: .screen {font-family: $screen-ff;}

　　　　會被自動編譯爲： .nav {height: Arial;}

　　　　通常把變量定義放在一個單獨的文件裏，例如_variables.scss(文件名字前加下劃線說明是個模塊，模塊與待編譯文件不能重名)而後用@import "variables"方法導入。

　　　　@import 與css原生的指令不一樣。

　　嵌套:

.screen {
height: $screen-ff;

.head {
font-size: 14px;
}
}
輸出爲:

.screen {
height: Arial;
}
.screen .head {
font-size: 14px;
}
屬性也能夠嵌套:

.head {
font: {
family: $screen-ff;
size: 14px;
}
}
這樣的嵌套可能會引起問題:

a {
:hover {
color: #66ccff;
}
}
輸出爲:

a :hover {
color: #66ccff;
}

這會讓a標籤裏包含的子級標籤得到此樣式，這不是咱們想要的結果,此時須要使用&來確認引入父級標籤

改寫爲:

a {
&:hover {
color: #66ccff;
}
}
輸出變爲:

a:hover {
color: #66ccff;
}

mixin:
通常在遇到網頁上有重複功能的div的時候，使用mixin來構建一個模板，進行復用。mixin也可做爲局部文件引入

示例:

@mixin col ($width: 50%) {
width: $width;
float: left;
}

這個方法用於設置一個模塊佔屏比，在傳參的時候能夠設置默認參數。
使用：

.body {
@include col(25%);
}
輸出:

.body {
width: 25%;
float: left;
}

 

extend:
你們都熟悉的繼承，當想要構建一些新的元素，又存在了相似元素的時候，能夠經過繼承來簡化代碼結構，加快開發和運行。
好比存在這樣一個樣式:

.danger {
color: #f00;
}

咱們想加一個更高程度的樣式:

.danger-serious {
color: #f00;
border: 2px #f00;
}

這樣就出現了代碼冗餘，經過extend改造:

.danger {
color: #f00;
}
.danger-serious {
@extend .danger;
border: 2px #f00;
}

輸出爲:

.danger, .danger-serious {
color: #f00;
}
.danger-serious {
border: 2px #f00;
}

若是不須要使用.danger樣式，能夠把.error改成%eroor，只用來繼承，自身不輸出（類比構造函數？）
可能要比較複雜的樣式才能體現出extend的威力...
extend與類的繼承不一樣，更像是接口的繼承，用於引入父級樣式類的全部屬性。
此外，extend不能繼承嵌套的選擇器序列。

sass的基本語法就說這些。此外sass還有不少自帶的函數，用於構建更加龐大的插件模塊，做爲開發者的咱們本身去編寫這些插件是很低效的，因此咱們通常使用Compass框架來提升sass的使用效率。