LESS 讓css也支持變量,運(yùn)算符,include,嵌套規(guī)則等等
發(fā)布時(shí)間:2010-07-04 14:42:14 作者:佚名
我要評(píng)論

最近在網(wǎng)上看到1個(gè)很有意思的CSS擴(kuò)展,這里介紹給大家。LESS 最早是1個(gè)ruby的gem,用于擴(kuò)展css的語(yǔ)法,用了LESS后,可以在css中使用變量,運(yùn)算符,include,嵌套規(guī)則等等?,F(xiàn)在LESS出了js版本,讓我們一起來(lái)看看LESS能為我們帶來(lái)什么吧?
使用
1. 下載js: http://lesscss.googlecode.com/ 最新版本好像是 1.0.30
2. 使用less,css文件的后綴名需要改為.less。
3. 在html頁(yè)面中加入下面代碼
<!-- 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個(gè)常量值,并在以后多處地方進(jìn)行重復(fù)使用。
一般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
大家一定碰見(jiàn)過(guò)再某個(gè)規(guī)則中需要用的部分樣式跟另外1個(gè)規(guī)則樣式一樣,但沒(méi)辦法,我們只能copy過(guò)來(lái),或者為元素指定多個(gè)class。但用了LESS后,我們不再需要這么痛苦了。
一般css寫法:
.red{
color:red;border:1px solid red;
}
.class2{
width:100px;font-size:12px;
/*下面的樣式跟red的一樣,copy過(guò)來(lái)的,修改就要修改2處*/
color:red;border:1px solid red;
}
LESS寫法:
.red{
color:red;border:1px solid red;
}
.class2{
width:100px;font-size:12px;
/*直接inlcude .red的規(guī)則*/
.red
}
嵌套規(guī)則:
一般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;
}
}
運(yùn)算符:
LESS 寫法:
@fontSize 12px;
.class1{
font-size : @fontSize + 2;
}
.class2{
font-size : @fontSize * 2;
}
更多其它功能:
請(qǐng)見(jiàn)LESS官方網(wǎng)站:http://lesscss.org/
原理分析:
LESS js版本的實(shí)現(xiàn)方式是使用ajax獲取style.less文件,然后根據(jù)該文件的規(guī)則生成最終瀏覽器能理解的css插入到html代碼中。所以就出現(xiàn)前面說(shuō)過(guò)的<link rel="stylesheet/less" href="style.less" />必須在js前面。
總結(jié):
LESS JS版本的實(shí)現(xiàn)原理,是每次請(qǐng)求都需要通過(guò)JS去動(dòng)態(tài)生成原始的css,如果css比較大的話,對(duì)于客戶端的性能影響比較大,所以個(gè)人覺(jué)的less的js版本實(shí)用性不強(qiáng)。
不知道LESS 的ruby版本的實(shí)現(xiàn)原理是怎么樣的,我認(rèn)為如果真的覺(jué)得less方式可以提高css的開發(fā)效率,到是可以參考它的代碼實(shí)現(xiàn)一套java或net的源代碼,在程序啟動(dòng)的時(shí)候一次根據(jù).less文件生成所有的css文件,而不是每次請(qǐng)求都用js動(dòng)態(tài)生成。
PS:剛剛無(wú)意間搜索,竟然找到1個(gè)net版本的less,大家可以看看這個(gè)版本怎么實(shí)現(xiàn)的:http://www.dotlesscss.com/
[作者]:BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/
1. 下載js: http://lesscss.googlecode.com/ 最新版本好像是 1.0.30
2. 使用less,css文件的后綴名需要改為.less。
3. 在html頁(yè)面中加入下面代碼
<!-- 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個(gè)常量值,并在以后多處地方進(jìn)行重復(fù)使用。
一般css寫法:
復(fù)制代碼
代碼如下:.class1{
color:#ccc;
width:100px;
}
.class2{
color:#ccc;
width:120px;
}
LESS寫法:
復(fù)制代碼
代碼如下:@color1: #ccc;
.class1{
color:@color1;
width:100px;
}
.class2{
color:@color1;
width:120px;
}
inlucde
大家一定碰見(jiàn)過(guò)再某個(gè)規(guī)則中需要用的部分樣式跟另外1個(gè)規(guī)則樣式一樣,但沒(méi)辦法,我們只能copy過(guò)來(lái),或者為元素指定多個(gè)class。但用了LESS后,我們不再需要這么痛苦了。
一般css寫法:
復(fù)制代碼
代碼如下:.red{
color:red;border:1px solid red;
}
.class2{
width:100px;font-size:12px;
/*下面的樣式跟red的一樣,copy過(guò)來(lái)的,修改就要修改2處*/
color:red;border:1px solid red;
}
LESS寫法:
復(fù)制代碼
代碼如下:.red{
color:red;border:1px solid red;
}
.class2{
width:100px;font-size:12px;
/*直接inlcude .red的規(guī)則*/
.red
}
嵌套規(guī)則:
一般css的寫法:
復(fù)制代碼
代碼如下:#header{color:red;}
#header .logo{backgroud-image:url(logo.gif);}
#header li{display:block;}
LESS寫法:
復(fù)制代碼
代碼如下:#header{
color:red;
.logo{
backgroud-image:url(logo.gif);
}
li{
display:block;
}
}
運(yùn)算符:
LESS 寫法:
復(fù)制代碼
代碼如下:@fontSize 12px;
.class1{
font-size : @fontSize + 2;
}
.class2{
font-size : @fontSize * 2;
}
更多其它功能:
請(qǐng)見(jiàn)LESS官方網(wǎng)站:http://lesscss.org/
原理分析:
LESS js版本的實(shí)現(xiàn)方式是使用ajax獲取style.less文件,然后根據(jù)該文件的規(guī)則生成最終瀏覽器能理解的css插入到html代碼中。所以就出現(xiàn)前面說(shuō)過(guò)的<link rel="stylesheet/less" href="style.less" />必須在js前面。
總結(jié):
LESS JS版本的實(shí)現(xiàn)原理,是每次請(qǐng)求都需要通過(guò)JS去動(dòng)態(tài)生成原始的css,如果css比較大的話,對(duì)于客戶端的性能影響比較大,所以個(gè)人覺(jué)的less的js版本實(shí)用性不強(qiáng)。
不知道LESS 的ruby版本的實(shí)現(xiàn)原理是怎么樣的,我認(rèn)為如果真的覺(jué)得less方式可以提高css的開發(fā)效率,到是可以參考它的代碼實(shí)現(xiàn)一套java或net的源代碼,在程序啟動(dòng)的時(shí)候一次根據(jù).less文件生成所有的css文件,而不是每次請(qǐng)求都用js動(dòng)態(tài)生成。
PS:剛剛無(wú)意間搜索,竟然找到1個(gè)net版本的less,大家可以看看這個(gè)版本怎么實(shí)現(xiàn)的:http://www.dotlesscss.com/
[作者]:BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/
相關(guān)文章
CSS實(shí)現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果
這篇文章主要介紹了CSS實(shí)現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨2020-02-05純css多種方法實(shí)現(xiàn)div中單行文字、多行文字及嵌套div垂直水平居中
經(jīng)常遇到要居中的問(wèn)題,水平居中問(wèn)題比較好解決,而垂直居中問(wèn)題因?yàn)関ertical-align經(jīng)常失效,下面與大家分享下幾個(gè)不錯(cuò)的解決方法2014-04-24- 除非你的網(wǎng)站只有一頁(yè),不然你一定會(huì)用的導(dǎo)航的.事實(shí)上,導(dǎo)航在網(wǎng)頁(yè)設(shè)計(jì)中是最重要部分之一.你要用很多時(shí)間去考慮如何讓瀏覽者更容易訪問(wèn)你的網(wǎng)站.2009-11-30
簡(jiǎn)單學(xué)習(xí)css組合與CSS嵌套的寫法
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:簡(jiǎn)單學(xué)習(xí)css組合與CSS嵌套的寫法. CSS組合 你不必重復(fù)有相同屬性的多個(gè)選擇符,你只要用英文逗號(hào)(,)隔開選擇符就可以了2009-04-02CSS 即將支持嵌套,SASS/LESS 等預(yù)處理器該何去何從
隨著 CSS 自定義屬性(CSS Variable)的大規(guī)模兼容,到如今 CSS 即將支持嵌套,一些預(yù)處理器的核心功能已經(jīng)被 CSS 原生支持,這是否表示 SASS/LESS 等預(yù)處理器已無(wú)用武之地2021-08-10