CSS預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特特性，將CSS作為目標(biāo)生成文件，然后開發(fā)者只要用這種語言進(jìn)行編碼工作。

使用CSS預(yù)處理器語言，可以讓你的CSS看起來更加的整潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多的好處。

目前市面上的主要CSS預(yù)處理語言有Less,Sass,Stylus三種

使用方法

• 方法一，引入Less.js文件

去官網(wǎng)下載Less.js文件，使用時候引入這兩行代碼

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="Less.js" type="text/javascript"></script>

• 方法二，軟件方式編譯
  推薦koala,koala是優(yōu)秀的編譯器，界面清晰簡潔，操作起來也非常簡單。鑒于koala是免費(fèi)編譯器，簡單操作如下圖:
  

• 方法三，使用編輯器插件

以Hbuild X的插件使用為例子
安裝less插件

"commands": [
            {
                "id": "LESS_COMPILE",
                "name": "編譯less",
                "command": [
                    "${programPath}",
                    "${file}",
                    "../css/${fileBasename}.css"  //此處代表文件地址
                ],
                "extensions": "less",
                "key": "",
                "showInParentMenu": false,
                "onDidSaveExecution": true   //此處代表是否打開自動保存
            }
        ]

完成以上步驟之后，當(dāng).less文件保存之后會自動生成一個.css文件

語法

1. 注釋

• 標(biāo)準(zhǔn)CSS注釋/* comment */，會保留到編譯后的文件中。
• 單行注釋//comment，之后保留在less源文件中，編譯后被省略。

2. 變量
   less允許用戶使用變量，變量以@開頭

@color:#FF0000;

#div {
    color:@color;
}

@side:left;

#div {
    border-@{side}-radius:5px;
}

3.嵌套

• 選擇器嵌套

#header {
    width: 100px;
    #con {
        font-size: 14px;
        h3 {
            background: #00E5EE;
        }
    }
}

編譯后的文件

#header {
  width: 100px;
}
#header #con {
  font-size: 14px;
}
#header #con h3 {
  background: #00E5EE;
}

在嵌套的代碼中，可以使用&引用父元素。例如a:hover偽類可以寫成

a {
   &:hover{color:#FFAD00;}
}

4. 混入

.box {
    border:1px solid black;
    background: skyblue;
}

.inner {
    color: white;
    .box;
}

編譯后的文件

.inner {
color: white;
border: 1px solid black;
background: skyblue;
}

• 混入?yún)?shù)

.box(@clolr:red) {
    background: @clolr;
}

#header {
    .box(green);
}

編譯結(jié)果

#header {
  background: green;
}

混入?yún)?shù)是，如果指定了參數(shù)，則使用指定的參數(shù)，如果沒有指定參數(shù)，則使用默認(rèn)的。當(dāng)沒有指定默認(rèn)參數(shù)時，必須指定參數(shù)，負(fù)責(zé)編譯錯誤。

5. 運(yùn)算
   任何數(shù)字、顏色、或者變量都可以參與運(yùn)算，運(yùn)算被包括在括號里面。

.box {width:(200px-20)*2;}

//結(jié)果
.box{width:360px;}