隨著越來(lái)越多的開發(fā)者使用SASS，我們有必要關(guān)注一下SASS的代碼的個(gè)數(shù)問(wèn)題。 我們可以從CSS（層疊樣式表）的語(yǔ)法出發(fā)，來(lái)解釋SASS語(yǔ)法的一些特別之處，畢竟，CSS樣式指南是很常見的。
這篇文章主要介紹了我個(gè)人比較感興趣的一些特性，也許能夠讓你從中受用，形成一套屬于自己的SASS使用指南。
繼續(xù)保持自己常用的CSS格式規(guī)則和樣式指南
這篇文章著重討論了關(guān)于SASS的一些內(nèi)容，但是在此基礎(chǔ)上，開發(fā)者應(yīng)該保持自己已有并且良好的格式規(guī)則。如果你還沒(méi)有發(fā)展出一套屬于自己的格式規(guī)則，那么這里有一些樣式指南的綜述，應(yīng)該可以幫你形成屬于自己的CSS編寫習(xí)慣。這里僅列出一些其中所包含的部分內(nèi)容：
1. 保持行縮進(jìn)一致
2. 保持冒號(hào)/大括號(hào)前后空格數(shù)的一致
3. 保持一行一個(gè)選擇器，一行一個(gè)規(guī)則
4. 相關(guān)的屬性盡量寫在一起
5. 對(duì)于類名命名規(guī)則由一個(gè)規(guī)劃
6. 避免使用CSS id選擇器
7. 等等
接下來(lái)我們就了解一下如何寫出美觀的SASS代碼吧，以編寫一個(gè).weather類的屬性為例：
首先列出@extend(s)
CSS Code
1..weather {
2. @extends %module;
3. ...
4.}
這樣做能夠使開發(fā)者保持一個(gè)清晰的思路，能夠立刻知道這個(gè)類與其屬性和其他類及其屬性的關(guān)系，保持屬性的一致和屬性重用的清晰思路。
普通樣式
CSS Code
1..weather {
2. @extends %module;
3. background: LightCyan;
4. ..
5.}
6.@include(s)
7.
8..weather {
9. @extends %module;
10. background: LightCyan;
11. @include transition(all 0.3s ease-out);
12. ...
13.}
這樣做能夠使開發(fā)者一眼看出@extend(s)和@include(s)的部署，便于自己以及其他開發(fā)者對(duì)代碼的解讀。你可能還會(huì)對(duì)是否區(qū)分自定義的@includes和公共來(lái)源的@includes在有些情況下做出決定（尤其是考慮到代碼的可重用性和時(shí)效性）
選擇器嵌套
CSS Code
1..weather {
2. @extends %module;
3. background: LightCyan;
4. @include transition(all 0.3s ease);
5. > h3 {
6. border-bottom: 1px solid white;
7. @include transform(rotate(90deg));
8. }
9.｝
在嵌套部分內(nèi)，繼續(xù)使用上述的樣式規(guī)則。嵌套的部分永遠(yuǎn)都應(yīng)該放在最后。
所有廠商前綴使用@mixins
廠商前綴（CSS前綴）具有非常強(qiáng)的時(shí)效性。 由于現(xiàn)代瀏覽器的更新，這些前綴的使用將越來(lái)越少。你可以通過(guò)更新mixins里的內(nèi)容（或者在你mixin里用到的一些庫(kù)將自動(dòng)更新）去適應(yīng)這些變化。 哪怕mixin只有短短一行，也沒(méi)有關(guān)系。
但當(dāng)某些廠商前綴的私有化非常嚴(yán)重時(shí)，這些前綴將非常難以標(biāo)準(zhǔn)化并且應(yīng)用其他前綴或者無(wú)前綴的版本會(huì)得不償失，我會(huì)選擇放棄@mixin這些廠商前綴。比如像-webkit-line-clamp， -mscontent-zoom-chaining或者類似情形。
嵌套的層次不要超過(guò)3層
CSS Code
1..weather {
2. .<span style="width: auto; height: auto; float: none;" id="14_nwp"><a style="text-decoration: none;" mpid="14" target="_blank" id="14_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">cities</span></a></span> {
3. li {
4. // no more!
5. }
6. }
7.}
如果你的嵌套多余三次，你很有可能寫出一個(gè)坑爹的（差勁的？）選擇器。坑爹的原因不外乎這個(gè)選擇器過(guò)于依賴HTML的架構(gòu)（不穩(wěn)定）， 過(guò)于詳細(xì)（功能過(guò)于強(qiáng)大，沒(méi)有彈性），或者是可重用性太差（不太可用）。同時(shí)，過(guò)多的嵌套層次容易導(dǎo)致代碼處于晦澀難懂的境地。
如果有的時(shí)候與類相關(guān)的代碼真的太多了，使得你不得已使用標(biāo)簽選擇器。你可能需對(duì)于某個(gè)類要寫的非常具體，以避免不必要的層疊。 甚至有可能的話，利用extend來(lái)使用CSS里一些可重用性的特性。
CSS Code
1..weather
2. > h3 {
3. @extend %line-under;
4. }
5.}
嵌套的代碼不要超過(guò)50行
若果SASS里的嵌套多于50行，那么它很可能不能完整的顯示在編譯器的一頁(yè)中，這樣會(huì)導(dǎo)致代碼不易閱讀，難以理解。嵌套本來(lái)是為了方便和簡(jiǎn)化思考與代碼的組織。如果有違閱讀性，請(qǐng)別嵌套。
全局與區(qū)域化的SASS文件序列相當(dāng)于表格內(nèi)容
換言之，它們并沒(méi)有任何一種固定樣式。開發(fā)者要提醒自己保持所有部分的樣式風(fēng)格一致，有序。
首先列出廠商/全局的庫(kù)，其次列出自定義庫(kù)，然后是模式，最后是每個(gè)分部的用到的庫(kù)。
這樣一來(lái)‘目錄‘看起來(lái)就像下面這個(gè)例子一樣，一目了然：
CSS Code
1./* Vendor Dependencies */
2.@import "compass";
3.
4./* Authored Dependencies */
5.@import "<span style="width: auto; height: auto; float: none;" id="10_nwp"><a style="text-decoration: none;" mpid="10" target="_blank" id="10_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">global</span></a></span>/colors";
6.@import "global/mixins";
7.
8./* Patterns */
9.@import "global/tabs";
10.@import "global/modals";
11.
12./* Sections */
13.@import "global/header";
14.@import "global/footer";
這些文件就像是一個(gè)指南針，顏色和mixins并不產(chǎn)生已編譯好的CSS代碼，他們純粹是獨(dú)立的庫(kù)。在此之后引入模式，使得重寫變得更安全，不會(huì)出現(xiàn)專一性的沖突。
將SASS合理的分割成多個(gè)小文件
這樣做沒(méi)有任何不好。在情況允許的時(shí)候，盡量使用小而精的多個(gè)文件，這樣便于開發(fā)者在尋找一些特定文件，而不是在幾個(gè)擁有冗長(zhǎng)代碼的大文件中大海撈針。
...
CSS Code1.@import "<span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" mpid="9" target="_blank" id="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">global</span></a></span>/header/header/";
2.@import "global/header/logo/";
3.@import "global/header/dropdowns/";
4.@import "global/header/nav/";
5.@import "global/header/really-specific-thingy/";
我經(jīng)常做的就是在一個(gè)全局scss文件中逐個(gè)引用這些文件，而不是引用一個(gè)_header.scss文件，然后再_header.scss文件中在逐個(gè)引用。這樣做能夠降低索引的時(shí)間和提高閱讀效率。
當(dāng)這些文件過(guò)多導(dǎo)致import序列太長(zhǎng)時(shí)，你可能會(huì)用到 Globbing 。
記得將Partials命名為_partial.scss
這是一個(gè)常見對(duì)于不能自身編譯的文件的命名。這樣的文件多少會(huì)依賴于其他的文件，使得自身不能獨(dú)立完成編譯。我個(gè)人喜歡在文件名之前添加一個(gè)下劃線，譬如_dropdown-menu.scss
在本地編譯時(shí)添加行映射
看這里，這意味著開發(fā)工具能夠告訴你每一條規(guī)則的來(lái)源，哪怕是一個(gè)被引入的partial文件。
在部署時(shí)，記得編譯已精簡(jiǎn)的文件
運(yùn)行中的網(wǎng)頁(yè)永遠(yuǎn)都只需要使用精簡(jiǎn)的CSS。
無(wú)需遞交.css文件
這可能要花些時(shí)間，但是不在文件庫(kù)中放入.css文件可以是一件非常美妙的事. 文件編譯在部署的時(shí)候就完成了。 所以唯一可以看見的是那些已經(jīng)精簡(jiǎn)的格式美妙的sass文件。 這使得對(duì)于文件的描述變得大有用途。文件描述是用于對(duì)比由版本發(fā)布者所做的一些更改。而對(duì)于已經(jīng)精簡(jiǎn)的.css文件，文件描述基本不需要了。
大方的使用注釋
很少有人會(huì)后悔在代碼中留下了注釋。不論是有用的還是不起眼的注釋，他們最終都會(huì)在編譯成精簡(jiǎn)的CSS文件時(shí)被抹去，對(duì)于開發(fā)者來(lái)說(shuō)不會(huì)有任何附加代價(jià)。
.overlay {
/* modals are 6000, saving messages are 5500, header is 2000 */
z-index: 5000;
}
提到注釋，你可能也需要對(duì)它做一些標(biāo)準(zhǔn)化的調(diào)整。在SASS中，’//’非常適用于添加注釋，’//’使得注釋和取消注釋變得非常方便。
將一些常用的數(shù)值和有特殊意義的數(shù)值轉(zhuǎn)化成變量
如果你發(fā)現(xiàn)自己重復(fù)使用一個(gè)數(shù)值（這在前端設(shè)計(jì)里是很常見的），你最好將它轉(zhuǎn)化成一個(gè)變量。這樣你可以通過(guò)命名來(lái)提醒自己這個(gè)數(shù)值的含義，并且在編寫代碼時(shí)保持一致性，是的你在更改這個(gè)數(shù)值時(shí)不需要逐行調(diào)整。
若果一個(gè)數(shù)字有著明顯的含義，那么將它轉(zhuǎn)化成變量是必不可少的啦。
CSS Code
1.$zHeader: 2000;
2.$zOverlay: 5000;
3.$zMessage: 5050;
4.
5..header {
6. z-index: $zHeader;
7.}
8..overlay {
9. z-index: $zOverlay;
10.}
11..message {
12. z-index: $zMessage;
13.}
這些數(shù)字可能會(huì)被儲(chǔ)存在單個(gè)文件中以@imported形式導(dǎo)入。這樣的方式使得你能夠?qū)τ谒械膠-index或者其他變量做一個(gè)統(tǒng)一管理
將色彩轉(zhuǎn)化成變量
除了黑與白。很多色彩都不會(huì)只是用一次，哪怕你認(rèn)為你不會(huì)再用到它了。但如果你將它轉(zhuǎn)化成一個(gè)變量，你可能發(fā)現(xiàn)在其他地方也會(huì)用到。對(duì)于色彩的變量，在sass中有color functions 可以處理他們，例如 lighten()和darkern()。這使得你對(duì)于整體的色彩控制變得簡(jiǎn)易（一次修改，一勞永逸）
嵌套并命名你的媒體庫(kù)
在sass里嵌套媒體庫(kù)的功能意味著1.你不必要在其他地方重寫選擇器而引發(fā)不必要的錯(cuò)誤；2.你所重寫的規(guī)則規(guī)則變得清晰明了，而當(dāng)這些代碼在你css代碼的末端或其他文件中時(shí)，這將會(huì)變得非常混亂。
CSS Code
1..sidebar {
2. float: rightright;
3. width: 33.33%;
4. @include bp(mama-bear) {
5. width: 25%;
6. }
7.}
這里有著更詳細(xì)的解釋：http://css-tricks.com/naming-media-queries/
將Shame放在最后
在你的全局樣式表中，在最后引入一個(gè)_shame.scss文件。
CSS Code
1.@import "compass"
2.
3....
4.
5.@import "shame"
如果你需要做一些快速更改，你可以在這里修改。如果在以后你有適當(dāng)?shù)臅r(shí)間和精力，你可以將
_shame.scss中所做出的對(duì)整體架構(gòu)的修改做一個(gè)更好的整理和構(gòu)架。詳情請(qǐng)看：http://csswizardry.com/2013/04/shame-css/
你是決定一切的主導(dǎo)
Sass不會(huì)做你沒(méi)有告訴它的事， 所以sass文件的最終輸出內(nèi)容因人而已。利用sass編寫css文件就像沒(méi)有用sass一樣，你才是代碼的主導(dǎo)。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試