LESS讓css也支援變數,運算子,include,巢狀規則等等
最近在網上看到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寫法:
1
2
3
4
5
6
7
8
9
|
.class 1 {
color : #ccc ;
width : 100px ;
} .class 2 {
color : #ccc ;
width : 120px ;
} |
LESS寫法:
1
2
3
4
5
6
7
8
9
10
11
|
@color 1: #ccc ;
.class 1 {
color :@color 1 ;
width : 100px ;
} .class 2 {
color :@color 1 ;
width : 120px ;
} |
inlucde
大家一定碰見過再某個規則中需要用的部分樣式跟另外1個規則樣式一樣,但沒辦法,我們只能copy過來,或者為元素指定多個class。但用了LESS後,我們不再需要這麼痛苦了。
一般css寫法:
1
2
3
4
5
6
7
8
9
|
. red {
color : red ; border : 1px solid red ;
} .class 2 {
width : 100px ; font-size : 12px ;
/*下面的樣式跟red的一樣,copy過來的,修改就要修改2處*/
color : red ; border : 1px solid red ;
} |
LESS寫法:
1
2
3
4
5
6
7
8
9
|
. red {
color : red ; border : 1px solid red ;
} .class 2 {
width : 100px ; font-size : 12px ;
/*直接inlcude .red的規則*/
. red
} |
巢狀規則:
一般css的寫法:
1
2
3
|
#header{ color : red ;}
#header .logo{backgroud-image: url (logo.gif);}
#header li{ display : block ;}
|
LESS寫法:
1
2
3
4
5
6
7
8
9
|
#header{ color : red ;
.logo{
backgroud-image: url (logo.gif);
}
li{
display : block ;
}
} |
運算子:
LESS 寫法:
1
2
3
4
5
6
7
|
@fontSize 12px ;
.class 1 {
font-size : @fontSize + 2 ;
} .class 2 {
font-size : @fontSize * 2 ;
} |
更多其它功能:
請見LESS官方網站:http://lesscss.org/
原理分析:
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動態生成。
PS:剛剛無意間搜尋,竟然找到1個net版本的less,大家可以看看這個版本怎麼實現的:http://www.dotlesscss.com/
本文轉自BearRui(AK-47)部落格園部落格,原文連結:http://www.cnblogs.com/BearsTaR/archive/2010/07/01/less.html ,如需轉載請自行聯絡原作者
相關文章
- less巢狀巢狀
- SCSS 巢狀規則CSS巢狀
- html的巢狀規則HTML巢狀
- 02-if巢狀和三目運算子巢狀
- HTML標籤巢狀規則HTML巢狀
- Html 標籤的巢狀規則HTML巢狀
- html標籤的巢狀規則HTML巢狀
- CSS 即將支援巢狀,SASS/LESS 等前處理器已無用武之地?CSS巢狀
- 變數和運算子變數
- 變數,運算子,if判斷變數
- 學習Sass 巢狀規則與屬性巢狀
- 正則匹配閉合HTML標籤(支援巢狀)HTML巢狀
- java 移位運算子,取反運算子 >> >> ~ , java 負數補碼存放規則等同於機器儲存Java
- JavaScript--變數和運算子JavaScript變數
- Python 變數與運算子Python變數
- 1.變數和運算子變數
- post-css/less/sass樣式巢狀與命令之"&"符號—BEMCSS巢狀符號
- LESS巢狀中的Mixins和classes巢狀
- 如何讓CSS計數器支援小數的動態變化?CSS
- 運用CSS變數CSS變數
- 變數名命名規則變數
- JavaScript五:全域性變數&區域性變數;運算子JavaScript變數
- [譯] CSS 變數和 JavaScript 讓應用支援動態主題CSS變數JavaScript
- python變數命名規則Python變數
- postcss支援vue/less/css/sass檔案CSSVue
- 配置 babel 支援物件擴充套件運算子、class 直接賦值變數等新特性Babel物件套件賦值變數
- 算數運算子
- javascript變數宣告規則詳解JavaScript變數
- Java 程式碼規範if巢狀Java巢狀
- JavaScript 運算子規則與隱式型別轉換詳解JavaScript型別
- javaEE支援巢狀事務嗎,Spring支援嗎Java巢狀Spring
- C++ include標頭檔案引入規則C++
- css規則整理CSS
- CSS命名規則CSS
- javascript變數的宣告以及命名規則JavaScript變數
- C++ 變數初始化規則C++變數
- JavaScript中的變數、資料型別以及運算子JavaScript變數資料型別
- Python入門——變數和常見的運算子Python變數