CSS的SASS樣式該怎麼使用

php中世界最好的语言原創: 2018-01-25 11:24:132106瀏覽

這次帶給大家CSS的SASS樣式該怎麼使用，CSS的SASS樣式使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

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

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

    1. 保持行縮排一致
    2. 保持一個冒號/大括號前後空格數的一致性
    3. 保持一行一個選擇器，一行一個規則
    4. 相關的屬性盡量寫在一起
    5. 對於類別名稱命名規則由一個規劃
    6. 避免使用CSS id選擇器##    7 . 等等

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

　　先列出@extend(s)

.weather {   
  @extends %module;    
  ...   
}

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

　　普通樣式

.weather {   
  @extends %module;    
  background: LightCyan;   
  ..   
}   
　　@include(s)   
.weather {   
  @extends %module;    
  background: LightCyan;   
  @include transition(all 0.3s ease-out);   
  ...   
}

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

　　選擇器巢狀

.weather {   
  @extends %module;    
  background: LightCyan;   
  @include transition(all 0.3s ease);   
  > h3 {   
    border-bottom: 1px solid white;   
    @include transform(rotate(90deg));   
  }   
｝

在巢狀部分內，繼續使用上述的樣式規則。嵌套的部分永遠都應該放在最後。

　　所有廠商前綴使用@mixins

　　廠商前綴（CSS前綴）具有非常強的時效性。由於現代瀏覽器的更新，這些前綴的使用將越來越少。你可以透過更新mixins裡的內容（或是在你mixin裡用到的一些函式庫會自動更新）來適應這些變化。就算mixin只有短短一行，也沒關係。

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

.weather {   
  .<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> {   
    li {   
      // no more!   
    }   
  }   
}

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

　　如果有的時候與類別相關的程式碼真的太多了，使得你不得已使用

標籤選擇器。你可能需要對於某個類別要寫的非常具體，以避免不必要的層疊。甚至有可能的話，利用extend來使用CSS裡一些可重複使用性的特性。

.weather   
  > h3 {   
    @extend %line-under;   
  }   
}

巢狀的程式碼不要超過50行

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

　　全域與區域化的SASS檔案序列相當於表格內容

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

　　首先列出廠商/全域的庫，其次列出自訂庫，然後是模式，最後是每個分部的用到的庫。

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

 /* Vendor Dependencies */  
@import "compass";   
    
/* Authored Dependencies */  
@import "<span style="width: auto; height: auto; float: none;" id="10_nwp"><a style="text-decoration: none;" 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";   
@import "global/mixins";   
    
/* Patterns */  
@import "global/tabs";   
@import "global/modals";   
    
/* Sections */  
@import "global/header";   
@import "global/footer";

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

　　將SASS合理的分割成多個小檔案

　　这样做没有任何不好。在情况允许的时候，尽量使用小而精的多个文件，这样便于开发者在寻找一些特定文件，而不是在几个拥有冗长代码的大文件中大海捞针。

...
@import "<span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" 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/";   
@import "global/header/logo/";   
@import "global/header/dropdowns/";   
@import "global/header/nav/";   
@import "global/header/really-specific-thingy/";

我经常做的就是在一个全局scss文件中逐个引用这些文件，而不是引用一个_header.scss文件，然后再_header.scss文件中在逐个引用。这样做能够降低索引的时间和提高阅读效率。

　　当这些文件过多导致import序列太长时，你可能会用到 Globbing 。
　　记得将Partials命名为_partial.scss

　　这是一个常见对于不能自身编译的文件的命名。这样的文件多少会依赖于其他的文件，使得自身不能独立完成编译。我个人喜欢在文件名之前添加一个下划线，譬如_dropdown-menu.scss
　　在本地编译时添加行映射

　　看这里，这意味着开发工具能够告诉你每一条规则的来源，哪怕是一个被引入的partial文件。
　　在部署时，记得编译已精简的文件

　　运行中的网页永远都只需要使用精简的CSS。
　　无需递交.css文件

　　这可能要花些时间，但是不在文件库中放入.css文件可以是一件非常美妙的事. 文件编译在部署的时候就完成了。所以唯一可以看见的是那些已经精简的格式美妙的sass文件。这使得对于文件的描述变得大有用途。文件描述是用于对比由版本发布者所做的一些更改。而对于已经精简的.css文件，文件描述基本不需要了。
　　大方的使用注释

　　很少有人会后悔在代码中留下了注释。不论是有用的还是不起眼的注释，他们最终都会在编译成精简的CSS文件时被抹去，对于开发者来说不会有任何附加代价。

.overlay {
  /* modals are 6000, saving messages are 5500, header is 2000 */
  z-index: 5000; 
}

　　提到注释，你可能也需要对它做一些标准化的调整。在SASS中，’//’非常适用于添加注释，’//’使得注释和取消注释变得非常方便。
　　将一些常用的数值和有特殊意义的数值转化成变量

　　如果你发现自己重复使用一个数值（这在前端设计里是很常见的），你最好将它转化成一个变量。这样你可以通过命名来提醒自己这个数值的含义，并且在编写代码时保持一致性，是的你在更改这个数值时不需要逐行调整。

　　若果一个数字有着明显的含义，那么将它转化成变量是必不可少的啦。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

CSS的SASS樣式該怎麼使用

相關文章