CSS工程化

CSS工程化

舊網頁面臨問題：全局樣式衝突、嵌套層次過深的選擇器、會帶來代碼的冗餘等

CSS工程化目的：將代碼層次化，容易看出嵌套關係；精簡代碼，提升效率。

CSS編譯器的出現:

CSS通過多個版本的更迭，從CSS1 到 CSS3，歷時多年。雖然新出了很多屬性和規範，但在語言自己的特性上，並無本質的改變。儘管使用 @import 指令能夠解決部分模塊化的

問題，但還遠遠不夠。但W3C官方彷佛對這些問題視而不見，就是不解決，因而，隨着前端技術（特別是JS）的快速發展，不少第三方機構開始嘗試進入CSS這個古老的領域，開

始着手解決這些遺留過久的難題。而它們的思路，就是像解決JS的問題那樣，用編譯器來解決CSS的問題.

什麼是CSS編譯器？ 
CSS編譯器，也叫作CSS預編譯器，是指開發者使用某種相似CSS（但實際不是）的語言編寫代碼，而後經過編譯器，將其編譯成瀏覽器真正能執行的CSS代碼。  
目前常見的CSS編譯器有：SASS和LESS。  
如何用SASS來實現優雅簡潔的CSS代碼： 

 SASS編譯器是使用Ruby 語言書寫而成的，所以，SASS的執行依賴Ruby的環境。值得慶幸的是，咱們不須要進行繁瑣的步驟去安裝和配置Ruby，直接安裝一個第三方的工具Koala便可。
使用方法：
1.新建一個文件夾，並用你熟悉的文本編輯器打開（例如VSCode），而後在文件夾中新建css文件夾，用於存放SASS文件以及CSS文件，再在根目錄中新建一個index.html文件。在css文件中新建一個index.scss 文件，注意後綴名爲.scss ，表示這是一個使用Sass CSS語言編寫的文件。
2.將建好的文件夾拖到loala主界面中 在Sass中取消勾選Source Map、選擇Autoprefix 以及在右邊文本輸入框中選擇CSS生成樣式。
變量：
sass讓人們受益的一個重要特性就是它爲css引入了變量。你能夠把反覆使用的css屬性值 定義成變量，而後經過變量名來引用它們，而無需重複書寫這一屬性值。或者，對於僅使用過一 次的屬性值，你能夠賦予其一個易懂的變量名，讓人一眼就知道這個屬性值的用途。
sass使用$ 符號來標識變量。
變量聲明
sass變量的聲明和css屬性的聲明很像： $highlight-color: #F90; 這意味着變量$highlightcolor如今的值是#F90。任何能夠用做css屬性值的賦值均可以用做sass的變量值，甚至是以空格分割的多個屬性值，如$basic-border: 1px solid black; 或以逗號分割的多個屬性值。。
變量引用
凡是css屬性的標準值（好比說1px或者bold）可存在的地方，變量就可使用。css生成時，變量會被它們的值所替代。以後，若是你須要一個不一樣的值，只須要改變這個變量的值，則全部引用此變量的地方生成的值都會隨之改變。

嵌套CSS 規則

嵌套選擇器
做用：將一大串須要一遍又一遍的重複樣式簡寫，使用SASS語言每一個選擇器只須要書寫一遍便可。  
嵌套屬性
在sass中，除了CSS選擇器，屬性也能夠進行嵌套。儘管編寫屬性涉及的重複不像編寫選擇器那麼糟糕，可是要反覆寫border-style 、border-width 、border-color 以及border-* 等也是很是煩人的。在sass中，你只需敲寫一遍border：   
    nav {
   　　 border: {
       　 style: solid;
        　width: 1px;
       　 color: #ccc;}
       　 }   

SASS中的註釋  
SASS中提供了兩種註釋方式，分別是：  
1. CSS標準註釋/* 註釋內容 */ ,該註釋會出如今編譯結果中   
2. 靜默註釋// 註釋內容 該註釋僅會出如今SASS代碼中 
 
混合器
若是你的整個網站中有幾處小小的樣式相似（例如一致的顏色和字體），那麼使用變量來統一處理，這種狀況是很是不錯的選擇。可是當你的樣式變得愈來愈複雜，你須要大段大段的重用樣式的代碼，獨立的變量就沒辦法應付這種狀況了。你能夠經過sass的混合器實現大段樣式的重用。  
簡單混合器
使用@mixin定義一個混合器，混合器的書寫跟CSS代碼塊同樣，能夠定義多個規則  

@mixin flex-container{  
            display:flex;  
            flex-wrap: wrap;  
            justify-content: space-between;}  
//其餘的代碼塊中都可以使用該混合器
@include flex-container;//使用混合器   
}   
.container{   
background: lightblue;   
@include flex-container;//使用混合器   
}   

編譯後生成：   

.main{
font-size:1.1em;   
color:inherit;   
display:flex;   
flex-wrap: wrap;   
justify-content: space-between;   
}   
.container{   
background: lightblue;   
display:flex;   
flex-wrap: wrap;   
justify-content: space-between;   
}