less、sass、stylus

less、sass、stylus

它們是三種相似的樣式動態語言，屬於css預處理語言，它們有相似css的語法，爲css賦予了動態語言的特性、如變量、繼承、運算、函數等。這麼作是爲了css的編寫和維護。

它們使用的文件分別是：.less、.scss、*.styl,這些文件是不能再網頁上直接使用的，最終要編譯成css文件來使用，編譯的方法有軟件編譯，或者用nodejs程序。

less、sass編譯軟件：
http://koala-app.com/index-zh.html

less中文網址：http://lesscss.cn/

less語法：

一、註釋

// 不會被編譯的註釋
    /* 會被編譯的註釋 */

二、變量

@w:200px; .box{ width:@w; height:@w; background-color:red; }

 

三、混合

.border{ border:1px solid #ddd; } .box(@w:100px,@h:50px,@bw:1px){ width:@w; height:@h; border:@bw solid #ddd; } .box{ .border; background-color:red; }

 

四、匹配模式

.p(r){ postion:relative; } .p(a){ postion:absolute; } .p(f){ postion:fixed; } .box{ .p(f); }

 

五、運算

@w:300px; .box{ width:@w+20; }

 

四、嵌套

.list{ li{ ... } a{ ... &:hover{ ... } } span{ ... } }

 

五、導入

// 導入common.less,導入a.css文件
 @import "common"; @import (less) "a.css";