日本在线观看邪恶网站不卡,97超爽免费公开视频在线

CSS的SASS樣式編程指南

來源：易賢網(wǎng) 閱讀：816 次日期：2016-06-15 14:56:18

溫馨提示：易賢網(wǎng)小編為您整理了“CSS的SASS樣式編程指南”,方便廣大網(wǎng)友查閱！

隨著越來越多的開發(fā)者使用SASS，我們有必要關注一下SASS的代碼的個數(shù)問題。我們可以從CSS（層疊樣式表）的語法出發(fā)，來解釋SASS語法的一些特別之處，畢竟，CSS樣式指南是很常見的。

這篇文章主要介紹了我個人比較感興趣的一些特性，也許能夠讓你從中受用，形成一套屬于自己的SASS使用指南。

繼續(xù)保持自己常用的CSS格式規(guī)則和樣式指南

這篇文章著重討論了關于SASS的一些內容，但是在此基礎上，開發(fā)者應該保持自己已有并且良好的格式規(guī)則。如果你還沒有發(fā)展出一套屬于自己的格式規(guī)則，那么這里有一些樣式指南的綜述，應該可以幫你形成屬于自己的CSS編寫習慣。這里僅列出一些其中所包含的部分內容：

1. 保持行縮進一致

2. 保持冒號/大括號前后空格數(shù)的一致

3. 保持一行一個選擇器，一行一個規(guī)則

4. 相關的屬性盡量寫在一起

5. 對于類名命名規(guī)則由一個規(guī)劃

6. 避免使用CSS id選擇器

7. 等等

接下來我們就了解一下如何寫出美觀的SASS代碼吧，以編寫一個.weather類的屬性為例：

首先列出@extend(s)

CSS Code

1..weather {

2. @extends %module;

3. ...

4.}

這樣做能夠使開發(fā)者保持一個清晰的思路，能夠立刻知道這個類與其屬性和其他類及其屬性的關系，保持屬性的一致和屬性重用的清晰思路。

普通樣式

CSS Code

1..weather {

2. @extends %module;

3. background: LightCyan;

4. ..

5.}

6.@include(s)

8..weather {

9. @extends %module;

10. background: LightCyan;

11. @include transition(all 0.3s ease-out);

12. ...

13.}

這樣做能夠使開發(fā)者一眼看出@extend(s)和@include(s)的部署，便于自己以及其他開發(fā)者對代碼的解讀。你可能還會對是否區(qū)分自定義的@includes和公共來源的@includes在有些情況下做出決定（尤其是考慮到代碼的可重用性和時效性）

選擇器嵌套

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.｝

在嵌套部分內，繼續(xù)使用上述的樣式規(guī)則。嵌套的部分永遠都應該放在最后。

所有廠商前綴使用@mixins

廠商前綴（CSS前綴）具有非常強的時效性。由于現(xiàn)代瀏覽器的更新，這些前綴的使用將越來越少。你可以通過更新mixins里的內容（或者在你mixin里用到的一些庫將自動更新）去適應這些變化。哪怕mixin只有短短一行，也沒有關系。

但當某些廠商前綴的私有化非常嚴重時，這些前綴將非常難以標準化并且應用其他前綴或者無前綴的版本會得不償失，我會選擇放棄@mixin這些廠商前綴。比如像-webkit-line-clamp， -mscontent-zoom-chaining或者類似情形。

嵌套的層次不要超過3層

CSS Code

1..weather {

2. .<a style="text-decoration: none;" mpid="14" target="_blank" id="14_nwl">cities</a> {

3. li {

4. // no more!

5. }

6. }

7.}

如果你的嵌套多余三次，你很有可能寫出一個坑爹的（差勁的？）選擇器。坑爹的原因不外乎這個選擇器過于依賴HTML的架構（不穩(wěn)定），過于詳細（功能過于強大，沒有彈性），或者是可重用性太差（不太可用）。同時，過多的嵌套層次容易導致代碼處于晦澀難懂的境地。

如果有的時候與類相關的代碼真的太多了，使得你不得已使用標簽選擇器。你可能需對于某個類要寫的非常具體，以避免不必要的層疊。甚至有可能的話，利用extend來使用CSS里一些可重用性的特性。

CSS Code

1..weather

2. > h3 {

3. @extend %line-under;

4. }

5.}

嵌套的代碼不要超過50行

若果SASS里的嵌套多于50行，那么它很可能不能完整的顯示在編譯器的一頁中，這樣會導致代碼不易閱讀，難以理解。嵌套本來是為了方便和簡化思考與代碼的組織。如果有違閱讀性，請別嵌套。

全局與區(qū)域化的SASS文件序列相當于表格內容

換言之，它們并沒有任何一種固定樣式。開發(fā)者要提醒自己保持所有部分的樣式風格一致，有序。

首先列出廠商/全局的庫，其次列出自定義庫，然后是模式，最后是每個分部的用到的庫。

這樣一來‘目錄‘看起來就像下面這個例子一樣，一目了然：

CSS Code

1./* Vendor Dependencies */

2.@import "compass";

4./* Authored Dependencies */

5.@import "<a style="text-decoration: none;" mpid="10" target="_blank" id="10_nwl">global</a>/colors";

6.@import "global/mixins";

8./* Patterns */

9.@import "global/tabs";

10.@import "global/modals";

11.

12./* Sections */

13.@import "global/header";

14.@import "global/footer";

這些文件就像是一個指南針，顏色和mixins并不產生已編譯好的CSS代碼，他們純粹是獨立的庫。在此之后引入模式，使得重寫變得更安全，不會出現(xiàn)專一性的沖突。

將SASS合理的分割成多個小文件

這樣做沒有任何不好。在情況允許的時候，盡量使用小而精的多個文件，這樣便于開發(fā)者在尋找一些特定文件，而不是在幾個擁有冗長代碼的大文件中大海撈針。

...

CSS Code1.@import "<a style="text-decoration: none;" mpid="9" target="_blank" id="9_nwl">global</a>/header/header/";

2.@import "global/header/logo/";

3.@import "global/header/dropdowns/";

4.@import "global/header/nav/";

5.@import "global/header/really-specific-thingy/";

我經常做的就是在一個全局scss文件中逐個引用這些文件，而不是引用一個_header.scss文件，然后再_header.scss文件中在逐個引用。這樣做能夠降低索引的時間和提高閱讀效率。

當這些文件過多導致import序列太長時，你可能會用到 Globbing 。

記得將Partials命名為_partial.scss

這是一個常見對于不能自身編譯的文件的命名。這樣的文件多少會依賴于其他的文件，使得自身不能獨立完成編譯。我個人喜歡在文件名之前添加一個下劃線，譬如_dropdown-menu.scss

在本地編譯時添加行映射

看這里，這意味著開發(fā)工具能夠告訴你每一條規(guī)則的來源，哪怕是一個被引入的partial文件。

在部署時，記得編譯已精簡的文件

運行中的網(wǎng)頁永遠都只需要使用精簡的CSS。

無需遞交.css文件

這可能要花些時間，但是不在文件庫中放入.css文件可以是一件非常美妙的事. 文件編譯在部署的時候就完成了。所以唯一可以看見的是那些已經精簡的格式美妙的sass文件。這使得對于文件的描述變得大有用途。文件描述是用于對比由版本發(fā)布者所做的一些更改。而對于已經精簡的.css文件，文件描述基本不需要了。

大方的使用注釋

很少有人會后悔在代碼中留下了注釋。不論是有用的還是不起眼的注釋，他們最終都會在編譯成精簡的CSS文件時被抹去，對于開發(fā)者來說不會有任何附加代價。

.overlay {

/* modals are 6000, saving messages are 5500, header is 2000 */

z-index: 5000;

}

提到注釋，你可能也需要對它做一些標準化的調整。在SASS中，’//’非常適用于添加注釋，’//’使得注釋和取消注釋變得非常方便。

將一些常用的數(shù)值和有特殊意義的數(shù)值轉化成變量

如果你發(fā)現(xiàn)自己重復使用一個數(shù)值（這在前端設計里是很常見的），你最好將它轉化成一個變量。這樣你可以通過命名來提醒自己這個數(shù)值的含義，并且在編寫代碼時保持一致性，是的你在更改這個數(shù)值時不需要逐行調整。

若果一個數(shù)字有著明顯的含義，那么將它轉化成變量是必不可少的啦。

CSS Code

1.$zHeader: 2000;

2.$zOverlay: 5000;

3.$zMessage: 5050;

5..header {

6. z-index: $zHeader;

7.}

8..overlay {

9. z-index: $zOverlay;

10.}

11..message {

12. z-index: $zMessage;

13.}

這些數(shù)字可能會被儲存在單個文件中以@imported形式導入。這樣的方式使得你能夠對于所有的z-index或者其他變量做一個統(tǒng)一管理

將色彩轉化成變量

除了黑與白。很多色彩都不會只是用一次，哪怕你認為你不會再用到它了。但如果你將它轉化成一個變量，你可能發(fā)現(xiàn)在其他地方也會用到。對于色彩的變量，在sass中有color functions 可以處理他們，例如 lighten()和darkern()。這使得你對于整體的色彩控制變得簡易（一次修改，一勞永逸）

嵌套并命名你的媒體庫

在sass里嵌套媒體庫的功能意味著1.你不必要在其他地方重寫選擇器而引發(fā)不必要的錯誤；2.你所重寫的規(guī)則規(guī)則變得清晰明了，而當這些代碼在你css代碼的末端或其他文件中時，這將會變得非?；靵y。

CSS Code

1..sidebar {

2. float: rightright;

3. width: 33.33%;

4. @include bp(mama-bear) {

5. width: 25%;

6. }

7.}

這里有著更詳細的解釋：http://css-tricks.com/naming-media-queries/

將Shame放在最后