關於sass的基礎文法介紹，sass基礎文法介紹

關於sass的基礎文法介紹，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的使用效率。