CSS預(yù)處理器
作為一只有點(diǎn)追求的程序猿魔眨，你有木有經(jīng)常在使用CSS定義樣式的時(shí)候產(chǎn)生這樣的想法——我能不能像寫JS代碼一樣去組織CSS的代碼，很遺憾的是純CSS沒(méi)法提供這樣的編程式的開(kāi)發(fā)流程給你使用硝训，它更像是給設(shè)計(jì)獅進(jìn)行頁(yè)面的簡(jiǎn)單維護(hù)而生的；
基于這樣的需求，于是CSS預(yù)處理器就應(yīng)運(yùn)而生送朱。如同源代碼需要通過(guò)通過(guò)編譯才能變成二進(jìn)制文件而后被計(jì)算機(jī)執(zhí)行搞坝，CSS預(yù)處理器扮演的角色就是對(duì)CSS進(jìn)行“預(yù)先編程”搔谴，然后編譯成CSS文件；
給CSS預(yù)處理器下一個(gè)定義就是：CSS預(yù)處理器是一門編程語(yǔ)言桩撮，能夠?qū)?yè)面樣式進(jìn)行設(shè)計(jì)然后再編譯成CSS文件敦第；
試想一下，你的CSS文件可以以編程的形式表現(xiàn)店量，必然使得設(shè)計(jì)樣式的代碼如同JS般代碼更加具有：
- 開(kāi)發(fā)友好芜果；
- 組織性；
- 簡(jiǎn)潔性融师；
- 可維護(hù)性右钾；
- 可讀性；
目前常見(jiàn)的CSS預(yù)處理器包括：
- Sass(Scss)
- Less
- Stylus
本文主要以Less為例去分享一下CSS預(yù)處理的語(yǔ)法和實(shí)例旱爆；
配置Less
- 服務(wù)器端配置
# 安裝
$ npm install -g less
# 編譯
$ lessc style.less > style.css
# 壓縮
$ lessc style.less -x > style.css
# 作為模塊引用
var less = require('less');
less.render('./style.less',function(error,css){console.log(css)});
# 利用自動(dòng)化構(gòu)建工具舀射，如gulp配置less;
$ npm install gulp -g
$ npm install gulp-less -S
//main.js
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('less',function(){
return gulp.src('./src/style.less')
.pipe(less())
.pipe(gulp.dest('../dist/css'))
})
$ gulp less;
- 客戶端配置
//先將less文件引入<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
//再將less.js引入<head>
<script src="less.js" type="text/javascript"></script>
可通過(guò)以下配置信息實(shí)時(shí)監(jiān)測(cè)編譯后的文件效果；
<script>less = { env: 'development'};</script><script src="less.js"></script><script>less.watch();</script>
Less的語(yǔ)言特性
1.變量
Less可以定義變量,怀伦，這個(gè)特性的好處是如果特定的屬性值在經(jīng)常用到可以不用重新賦值脆烟；通過(guò)變量進(jìn)行運(yùn)算更加符合編程思想；
//定義變量
@variable: value;
//引用
@variable | @{variable}
//簡(jiǎn)單引用
@bg-color: #000;
body{
background: @bg-color + #ccc;
#header{
background: darken(@bg-color,10%);
}
}
注意房待，當(dāng)變量作為rule屬性邢羔、rule屬性部件、選擇器吴攒、選擇器部件和字符串拼接時(shí)张抄，必須使用@{variable}
//rule屬性
@bgc : background-color
.header{
@{bgc} : #ccc;
}
//rule屬性部件
@color:color
.header{
background-@{color} :#ccc;
}
//選擇器
@rule: .rule
@{rule}{
color: red;
}
//選擇器部件
.header-@{rule}{
color: red;
}
//字符串拼接
@hello: 'hello';
@world: world;
.hi {
content: '@{hello}@{world}';
}
//less變量支持列表類型數(shù)據(jù)，通過(guò)extract(variable , index)獲取指定下標(biāo)的值洼怔，通過(guò)length(variable)獲取列表類型變量的元素個(gè)數(shù)署惯；
@colors : #fff, #ccc, #000；
.header{
color: extract(@colors,0);
font-size: 12px*length(@colors);
}
```
#####2.嵌套
Less的嵌套特性能夠**減少CSS代碼的冗余**镣隶；
```
.box{
>.item-1{
color:darken(#fff,5%);
}
.item-2{
color:darken(#fff,20%);
}
+ .item-3{
color:darken(#fff,40%)
}
}
```
```
//嵌套過(guò)程极谊，如果需要重新返回上一級(jí)的父選擇器诡右，可以使用&；
.border{
border:1px solid #fff;
}
.parent{
.children{.border;}
&:hover{
color:red;
}
}
```
#####3. 混合
Less的混合特性能夠在另個(gè)一類的規(guī)則集中引用定義好的規(guī)則集轻猖，從而實(shí)現(xiàn)**代碼的復(fù)用性**帆吻；
```
.font-rule{
font-size: 30px;
text-align: center;
color:#fff;
line-height: 50px;
}
.item{
height: 50px;
background: lighten(@bg-color,40%);
.font-rule
}
```
mixin本質(zhì)上相當(dāng)于**函數(shù)**；
```
.change-bg-color(@color){
background: @color;
}
.box{
.item-1{
color:darken(#fff,5%);
}
.item-2{
color:darken(#fff,20%);
}
.item-3{
color:darken(#fff,40%);
.change-bg-color(pink)
}
}
```
```
//minxin內(nèi)置兩個(gè)對(duì)象@arguments和@reset咙边，@arguments代表mixin的所有入?yún)?而@reset代表mixin的入?yún)?shù)組猜煮；
.rule (@width,@height,@color,@font-size){
width: @width;
height: @height;
color:@color;
font-size:@font-size;
background: #aaa;
}
.border(@width,@style,@color){
border:@arguments;
}
.box{
.border(1px,solid,black);
.rule(100px,100px,#fff,20px);
}
```
**Less中的"條件語(yǔ)句"**
```
@true:true;
@false:false;
.box when(@true){
&::after{
display:block;
content:'hi';
color:#000;
}
}
.box when (@true) or (@false){
&:hover{
background: #fff;
}
}
//可結(jié)合以下運(yùn)算符和內(nèi)置函數(shù)一起使用
// =,>,>=,<=,< 關(guān)系運(yùn)算符
// and、not败许、or(使用,號(hào)表示) 邏輯運(yùn)算符
/* 類型判斷函數(shù) * iscolor * isnumber * isstring * iskeyword * isurl */
/* 單位判斷函數(shù) * ispixel * ispercentage * isem * isunit */
```
**Less中的“循環(huán)語(yǔ)句”**
```
.container(@i,@n) when ((@i) =< @n){
.item-@{i}{
height: 100px;
background: #000;
}
.container(@i+1)
}
.container(1,4);
```
---
Less中存在內(nèi)置函數(shù)可供調(diào)用王带，這里重點(diǎn)提以下default();
> default()：作用相當(dāng)于條件語(yǔ)句的else
```
.container(@i) when('.item-@{i}' = '.item-1'){
width: 100px;
height: 100px;
background: #aaa;
.container(@i) when('.item-@{i}' = '.item-2'){
width: 100px;
height: 100px;
background: pink;
}
.container() when(default()){
width: 100px;
height: 100px;
background: blue;
}
div{.container();}
```
#####4.@import
> @import引入外部less文件;
less的@import提供6個(gè)配置選項(xiàng)（reference、inline市殷、less愕撰、css、once醋寝、multiple）來(lái)改變引入文件的特性搞挣；
- @import (reference) 'path':less文件作為樣式庫(kù)供extend和minxin引用；
- @import (inline) 'path' :用于引入與less不兼容的css文件音羞，通過(guò)inline配置告知編譯器不對(duì)引入的文件進(jìn)行編譯處理囱桨，直接輸出到最終輸出;*注意：引入的文件和當(dāng)前文件會(huì)被編譯為一個(gè)樣式樣式*
- @import (less) 'path':引入less文件；
- @import (css) 'path' : 引入css文件黄选，但*當(dāng)前文件會(huì)輸出一個(gè)樣式文件蝇摸，而被引入的文件自身為一個(gè)獨(dú)立的樣式文件*
- @import (once) 'path':對(duì)同一資源僅引入一次；
- @import (multiple) 'path' : 對(duì)同一資源引入多次办陷；
#####5.繼承extend()
- 兩種繼承方式
```
.bgc{
background:red;
}
.header:extend(.bgc){
color:white;
}
.footer{
&:extend(.bgc)
}
```
使用less的繼承方法時(shí)要注意一下幾點(diǎn)：
** 父選擇器不支持變量形式**
```
@p1: .parent1;
@p2: .parent2;.
parent1{
height: 100px;
}
@{p2}{
height: 200px;
}
// 匹配失敗
// 形式1貌夕，不支持以變量作入?yún)?.son1:extend(@{p1}){}
// 形式2，不支持以變量作為選擇器的規(guī)則集合
.son1:extend(.parent2){}
// 匹配成功
.son2:extend(.parent1){}
```
**media query影響繼承的作用域**
```
// 非media query內(nèi)的extend操作民镜，將會(huì)繼承所有media query中匹配的選擇器樣式
@media screen{
.parent{
height: 100px;
}
@media (min-width: 1023px){
.parent{
width: 200px;
}
}
}
.son:extend(.parent){}
//等價(jià)于
@media screen {
.parent,
.son {
height: 100px;
}
}
@media screen and (min-width: 1023px) {
.parent,
.son {
width: 200px;
}
}
```
```
//media query內(nèi)的extend操作啡专，僅能繼承當(dāng)前塊的其他選擇器樣式;
.parent1{
height: 200px;
}
@media screen{
.parent1{
height: 100px;
}
// 無(wú)法繼承子media query塊的選擇器樣式
.son1:extend(.parent2){}
@media (min-width: 1023px){
// 繼承父media query塊的選擇器樣式
.son2:extend(.parent1){}
.parent2{
width: 200px;
}
}
}
```
---
參考資料：
- [Less文檔](http://lesscss.cn/)
- [前端構(gòu)建：Less入了個(gè)門](http://www.cnblogs.com/fsjohnhuang/p/4187675.html)