CSS預處理

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增加了一些編程的特特性，將CSS作爲目標生成文件，然後開發者只要用這種語言進行編碼工作。

使用CSS預處理器語言，可以讓你的CSS看起來更加的整潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多的好處。

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

使用方法

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

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

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

• 方法二，軟件方式編譯
  推薦koala,koala是優秀的編譯器，界面清晰簡潔，操作起來也非常簡單。鑑於koala是免費編譯器，簡單操作如下圖:
  

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

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

修改配置

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

完成以上步驟之後，當.less文件保存之後會自動生成一個.css文件

語法

1. 註釋

• 標準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;
}

• 混入參數

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

#header {
    .box(green);
}

編譯結果

#header {
  background: green;
}

混入參數是，如果指定了參數，則使用指定的參數，如果沒有指定參數，則使用默認的。當沒有指定默認參數時，必須指定參數，負責編譯錯誤。

5. 運算
   任何數字、顏色、或者變量都可以參與運算，運算被包括在括號裏面。

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

//結果
.box{width:360px;}