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文件籽懦，使用時(shí)候引入這兩行代碼
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="Less.js" type="text/javascript"></script>
-
方法二，軟件方式編譯
推薦koala,koala是優(yōu)秀的編譯器氛魁，界面清晰簡(jiǎn)潔暮顺，操作起來也非常簡(jiǎn)單。鑒于koala是免費(fèi)編譯器秀存，簡(jiǎn)單操作如下圖:
方法三捶码，使用編輯器插件
以Hbuild X的插件使用為例子
安裝less插件
修改配置
"commands": [
{
"id": "LESS_COMPILE",
"name": "編譯less",
"command": [
"${programPath}",
"${file}",
"../css/${fileBasename}.css" //此處代表文件地址
],
"extensions": "less",
"key": "",
"showInParentMenu": false,
"onDidSaveExecution": true //此處代表是否打開自動(dòng)保存
}
]
完成以上步驟之后，當(dāng).less文件保存之后會(huì)自動(dòng)生成一個(gè).css文件
語法
- 注釋
- 標(biāo)準(zhǔn)CSS注釋
/* comment */或链，會(huì)保留到編譯后的文件中惫恼。 - 單行注釋
//comment，之后保留在less源文件中澳盐，編譯后被省略祈纯。
- 變量
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;}
}
- 混入
.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í)冕碟，必須指定參數(shù)，負(fù)責(zé)編譯錯(cuò)誤匆浙。
- 運(yùn)算
任何數(shù)字、顏色厕妖、或者變量都可以參與運(yùn)算首尼，運(yùn)算被包括在括號(hào)里面。
.box {width:(200px-20)*2;}
//結(jié)果
.box{width:360px;}
