Posted on 2010-07-01 08:58
BearRui(AK-47) 閱讀(2162)
評論(3) 編輯 收藏 所屬分類:
CSS
最近在網上看到1個很有意思的CSS擴展，這里介紹給大家。LESS 最早是1個ruby的gem，用于擴展css的語法，用了LESS后，可以在css中使用變量，運算符，include,嵌套規則等等。現在LESS出了js版本，讓我們一起來看看LESS能為我們帶來什么吧?
使用
1. 下載js: http://lesscss.googlecode.com/ 最新版本好像是 1.0.22
2. 使用less，css文件的后綴名需要改為.less。
3. 在html頁面中加入下面代碼
<!-- style.less文件就是樣式表文件，并且style.less必須放在less-1.0.22.min.js文件前加載，原理后面介紹 -->
<link rel="stylesheet/less" href="style.less" />
<script src="less-1.0.22.min.js"></script>
變量
變量可以讓我們聲明1個常量值，并在以后多處地方進行重復使用。
一般css寫法：
.class1{
color:#ccc;
width:100px;
}
.class2{
color:#ccc;
width:120px;
}
LESS寫法:
@color1: #ccc;
.class1{
color:@color1;
width:100px;
}
.class2{
color:@color1;
width:120px; }
inlucde
大家一定碰見過再某個規則中需要用的部分樣式跟另外1個規則樣式一樣，但沒辦法，我們只能copy過來，或者為元素指定多個class。但用了LESS后，我們不再需要這么痛苦了。
一般css寫法：
.red{
color:red;border:1px solid red;
}
.class2{
width:100px;font-size:12px;
/*下面的樣式跟red的一樣,copy過來的，修改就要修改2處*/
color:red;border:1px solid red;
}
LESS寫法:
.red{
color:red;border:1px solid red;
}
.class2{
width:100px;font-size:12px;
/*直接inlcude .red的規則*/
.red
}
嵌套規則:
一般css的寫法：
#header{color:red;}
#header .logo{backgroud-image:url(logo.gif);}
#header li{display:block;}
LESS寫法:
#header{
color:red;
.logo{
backgroud-image:url(logo.gif);
}
li{
display:block;
}
}
運算符：
LESS 寫法:
@fontSize 12px;
.class1{
font-size : @fontSize + 2;
}
.class2{
font-size : @fontSize * 2;
}
更多其它功能:
原理分析:
LESS js版本的實現方式是使用ajax獲取style.less文件，然后根據該文件的規則生成最終瀏覽器能理解的css插入到html代碼中。所以就出現前面說過的<link rel="stylesheet/less" href="style.less" />必須在js前面。
總結:
LESS JS版本的實現原理，是每次請求都需要通過JS去動態生成原始的css，如果css比較大的話，對于客戶端的性能影響比較大，所以個人覺的less的js版本實用性不強。
不知道LESS 的ruby版本的實現原理是怎么樣的，我認為如果真的覺得less方式可以提高css的開發效率，到是可以參考它的代碼實現一套java或net的源代碼，在程序啟動的時候一次根據.less文件生成所有的css文件，而不是每次請求都用js動態生成。