主頁 > 知識庫 > CSS的SASS樣式編程指南

CSS的SASS樣式編程指南

熱門標簽:騰訊植物園地圖標注 外呼智能系統(tǒng)報價 經(jīng)綸電銷機器人 鄒城智能外呼系統(tǒng) 電話機器人宣傳片 浦東新區(qū)百度地圖標注圖片 巫山縣地圖標注app 華為收費站地圖標注 個貸電銷機器人

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

  這篇文章主要介紹了我個人比較感興趣的一些特性,也許能夠讓你從中受用,形成一套屬于自己的SASS使用指南。
繼續(xù)保持自己常用的CSS格式規(guī)則和樣式指南

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

    1. 保持行縮進一致
    2. 保持冒號/大括號前后空格數(shù)的一致
    3. 保持一行一個選擇器,一行一個規(guī)則
    4. 相關(guān)的屬性盡量寫在一起
    5. 對于類名命名規(guī)則由一個規(guī)劃
    6. 避免使用CSS id選擇器
    7. 等等

  接下來我們就了解一下如何寫出美觀的SASS代碼吧,以編寫一個.weather類的屬性為例:
  首先列出@extend(s)
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .weather {   
  2.   @extends %module;    
  3.   ...   
  4. }  

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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ā)者對代碼的解讀。你可能還會對是否區(qū)分自定義的@includes和公共來源的@includes在有些情況下做出決定(尤其是考慮到代碼的可重用性和時效性)
  選擇器嵌套
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .weather {   
  2.   @extends %module;    
  3.   background: LightCyan;   
  4.   @include transition(all 0.3s ease);   
  5.   > h3 {   
  6.     border-bottom1px solid white;   
  7.     @include transform(rotate(90deg));   
  8.   }   
  9. }  

  在嵌套部分內(nèi),繼續(xù)使用上述的樣式規(guī)則。嵌套的部分永遠都應(yīng)該放在最后。
  所有廠商前綴使用@mixins

  廠商前綴(CSS前綴)具有非常強的時效性。 由于現(xiàn)代瀏覽器的更新,這些前綴的使用將越來越少。你可以通過更新mixins里的內(nèi)容(或者在你mixin里用到的一些庫將自動更新)去適應(yīng)這些變化。 哪怕mixin只有短短一行,也沒有關(guān)系。
但當某些廠商前綴的私有化非常嚴重時,這些前綴將非常難以標準化并且應(yīng)用其他前綴或者無前綴的版本會得不償失,我會選擇放棄@mixin這些廠商前綴。比如像-webkit-line-clamp, -mscontent-zoom-chaining或者類似情形。
  嵌套的層次不要超過3層
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .weather {   
  2.   .<span style="width: auto; height: auto; float: none;" id="14_nwp"><a style="text-decoration: none;" mpid="14" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=cities&k0=cities&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" 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. }  

  如果你的嵌套多余三次,你很有可能寫出一個坑爹的(差勁的?)選擇器??拥脑虿煌夂踹@個選擇器過于依賴HTML的架構(gòu)(不穩(wěn)定), 過于詳細(功能過于強大,沒有彈性),或者是可重用性太差(不太可用)。同時,過多的嵌套層次容易導(dǎo)致代碼處于晦澀難懂的境地。

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .weather   
  2.   > h3 {   
  3.     @extend %line-under;   
  4.   }   
  5. }  

  嵌套的代碼不要超過50行

  若果SASS里的嵌套多于50行,那么它很可能不能完整的顯示在編譯器的一頁中,這樣會導(dǎo)致代碼不易閱讀,難以理解。嵌套本來是為了方便和簡化思考與代碼的組織。如果有違閱讀性,請別嵌套。
  全局與區(qū)域化的SASS文件序列相當于表格內(nèi)容

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Vendor Dependencies */  
  2. @import "compass";   
  3.     
  4. /* Authored Dependencies */  
  5. @import "<span style="widthautoheightautofloatnone;" id="10_nwp"><a style="text-decorationnone;" mpid="10" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" 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";  

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @import "<span style="widthautoheightautofloatnone;" id="9_nwp"><a style="text-decorationnone;" mpid="9" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" 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)常做的就是在一個全局scss文件中逐個引用這些文件,而不是引用一個_header.scss文件,然后再_header.scss文件中在逐個引用。這樣做能夠降低索引的時間和提高閱讀效率。

  當這些文件過多導(dǎo)致import序列太長時,你可能會用到 Globbing 。
  記得將Partials命名為_partial.scss

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

  看這里,這意味著開發(fā)工具能夠告訴你每一條規(guī)則的來源,哪怕是一個被引入的partial文件。
  在部署時,記得編譯已精簡的文件

  運行中的網(wǎng)頁永遠都只需要使用精簡的CSS。
  無需遞交.css文件

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

  很少有人會后悔在代碼中留下了注釋。不論是有用的還是不起眼的注釋,他們最終都會在編譯成精簡的CSS文件時被抹去,對于開發(fā)者來說不會有任何附加代價。
 
.overlay {
  /* modals are 6000, saving messages are 5500, header is 2000 */
  z-index: 5000;
}

  提到注釋,你可能也需要對它做一些標準化的調(diào)整。在SASS中,’//’非常適用于添加注釋,’//’使得注釋和取消注釋變得非常方便。
  將一些常用的數(shù)值和有特殊意義的數(shù)值轉(zhuǎn)化成變量

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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ù)字可能會被儲存在單個文件中以@imported形式導(dǎo)入。這樣的方式使得你能夠?qū)τ谒械膠-index或者其他變量做一個統(tǒng)一管理
  將色彩轉(zhuǎn)化成變量

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .sidebar {   
  2.   floatrightright;   
  3.   width: 33.33%;   
  4.   @include bp(mama-bear) {   
  5.     width: 25%;   
  6.   }   
  7. }  

  這里有著更詳細的解釋:http://css-tricks.com/naming-media-queries/
  將Shame放在最后

  在你的全局樣式表中,在最后引入一個_shame.scss文件。
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @import "compass"  
  2.     
  3. ...   
  4.     
  5. @import "shame"  

  如果你需要做一些快速更改,你可以在這里修改。如果在以后你有適當?shù)臅r間和精力,你可以將
_shame.scss中所做出的對整體架構(gòu)的修改做一個更好的整理和構(gòu)架。詳情請看:http://csswizardry.com/2013/04/shame-css/
  你是決定一切的主導(dǎo)

  Sass不會做你沒有告訴它的事, 所以sass文件的最終輸出內(nèi)容因人而已。利用sass編寫css文件就像沒有用sass一樣,你才是代碼的主導(dǎo)。

標簽:那曲 日喀則 楊凌 唐山 廣西 三沙 滁州 南平

巨人網(wǎng)絡(luò)通訊聲明:本文標題《CSS的SASS樣式編程指南》,本文關(guān)鍵詞  CSS,的,SASS,樣式,編程,指南,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《CSS的SASS樣式編程指南》相關(guān)的同類信息!
  • 本頁收集關(guān)于CSS的SASS樣式編程指南的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章