相信對于知道前端這個(gè)詞的人應(yīng)該都聽說過CSS吧。提到CSS我們應(yīng)該容易想到傳統(tǒng)CSS帶來的一些局限性，實(shí)際上在CSS的整個(gè)發(fā)展歷史上，總共經(jīng)歷了4次的布局革命，從初代的table布局到CSS+DIV布局，再到現(xiàn)在比較流行的的Flex布局和Grid布局。

初代的table布局

實(shí)際上這個(gè)布局在目前的HTML5的規(guī)范中已經(jīng)不存在了，但是還是可以稍微了解一下的：

<MULTICOLCOLS="3"GUTTER="25">
<P>
<FONTSIZE="4"COLOR="RED">This would be some font broken up into columns</FONT>
</P>
</MULTICOL>

table初代布局有一個(gè)問題是：它的結(jié)構(gòu)跟表現(xiàn)是混合在一起的。因此在我們需求變更和改動(dòng)的過程中實(shí)際上是很困難的。

CSS+DIV布局：結(jié)構(gòu)和表現(xiàn)分離開來

CSS+DIV也是目前最流行的布局方式。

html { margin-left: 2cm; font-family: "Times", serif;}
h1 { font-size: 24px;}

Flex布局

也就是我們說的一個(gè)彈性盒子，它是移動(dòng)端一個(gè)比較主流的布局技術(shù)，單一維度的布局。

.flex {
 height: calc(100% - 120px);
 display: flex;
}

Grid布局

也叫作網(wǎng)格布局，實(shí)現(xiàn)了CSS維度的拓展。使用網(wǎng)格布局可以定義它的行和列的一個(gè)屬性，這也是它的CSS的二維布局。

.container {
 height: 100%;
 display: grid;
 grid-template-columns: 200px auto 200px;
 grid-template-rows: 80px auto 40px;
}

總的來說，它們還是有一些共同的特點(diǎn)的：

• 只有一個(gè)全局的命名空間，所以無法避免出現(xiàn)選擇器的沖突。
• 模塊化做的不夠好，很容易造成嵌套和樣式覆蓋混亂，然后導(dǎo)致了一大堆的亂七八糟的文件的產(chǎn)生。

上面兩個(gè)問題是傳統(tǒng)CSS的局限性的兩個(gè)關(guān)鍵地方所在，也是傳統(tǒng)CSS的兩個(gè)槽點(diǎn)。因此就誕生了CSS預(yù)處理器。

預(yù)處理器：也就是在我們編寫代碼的時(shí)候，可以不按照傳統(tǒng)的CSS的寫法來寫，然后經(jīng)過一層預(yù)處理器轉(zhuǎn)換成瀏覽器可以理解的一個(gè)傳統(tǒng)的CSS，這就是CSS預(yù)處理器的作用。

CSS預(yù)處理器的幾大重要功能：

文件拆分

• css預(yù)處理器擴(kuò)展了@import 指令的能力，比如在es6里面如果要引入一個(gè)js文件，一般我們需要用一個(gè)import，但是經(jīng)過了CSS預(yù)處理器都會(huì)有一個(gè)@import的能力。
• 編譯環(huán)節(jié)將切分后的文件重新合并為一個(gè)大文件，文件的引入解決了兩個(gè)問題：
  1 解決了大文件不便維護(hù)的問題
  2 解決了一堆小文件在加載時(shí)的性能問題

模塊化

• css 文件在合理切分
• 編譯環(huán)節(jié)將切分后的文件重新合并為一個(gè)大文件
  1 解決了大文件不便維護(hù)的問題
  2 小文件的相互關(guān)系形成一個(gè)樹形結(jié)構(gòu)

index.css
├─ header.css
│ └─ reset.css
├─ content.css
│ ├─ left.css
│ │ └─ nav.css
│ └─ right.css
├─ fotter.css
└─ ...

選擇符嵌套

• 傳統(tǒng)嵌套
  1 手工維護(hù)縮進(jìn)關(guān)系
  2 當(dāng)上級(jí)選擇符發(fā)生變化時(shí)，所有相關(guān)的下級(jí)選擇符都要修改
  3 注釋書寫

.header {
    margin: auto; /* 水平居中 */
    width: 1000px;
    color: #333;
}
.header li {
    float: left;
    width: 100px;
}
.header li a {
    display: block;
    text-decoration: none;
}

• 預(yù)處理器嵌套
  1 層級(jí)關(guān)系清晰
  2 注釋清晰易讀

.header {
        margin: auto // 水平居中
        width: 1000px
        color: #333
    
        li {
            float: left // 水平排列
            width: 100px
        
            a {
                display: block
                text-decoration: none
            }
        }
}

變量(換膚)

• 實(shí)現(xiàn)了網(wǎng)站視覺風(fēng)格的統(tǒng)一

strong {
    color: #ff4466;
    font-weight: bold;
}
/* ... */
.error {
    color: #ff4466;
}

• 換膚

$color-primary = #329FD9;
header {
    color: $color-default
}
.footer {
    color: $color-default
}

運(yùn)算

$left: 20px;
.header {
    margin-left: $left + 12px;
}

函數(shù)

比如說下面的圓角，可以實(shí)現(xiàn)一個(gè)CSS里面的函數(shù)的復(fù)用，提供一個(gè)可以統(tǒng)一修改元素圓角的css方法。

.border-radius(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}