簡單的LESS Tutorial
1. 什麼是LESS?
LESS是一種動態的CSS語言,更專業的稱呼是CSS preprocessor。作爲CSS的擴展語言,LESS可以讓CSS文件邏輯上更清晰,從而更容易維護和更新。LESS是開源的,誕生於2009年,採用javascript開發, LESS深受另外一種動態CSS語言SASS/SCSS的影響(SCSS是SASS的升級版) 。相對於SASS/SCSS或者其他CSS preprocessor, LESS的典型特徵有兩個,
支持實時編譯,例如網頁或者應用可以直接應用less文件,通過嵌入less.js,browser支持less實時編譯成css文件,並完成rendering
支持純CSS
2. 如何應用LESS?
在實際的開發中,可以有兩種應用LESS的方式,直接應用LESS和間接應用LESS。如果選擇直接應用LESS文件,則需要在相應的頁面嵌入less.js, 瀏覽器會實時的把LESS文件編譯爲CSS文件並進行渲染,即頁面中需要包含下面的代碼,
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
如果選擇間接的方式,則需要預先把LESS編譯成CSS文件。
很多編輯器都有LESS的插件提供,例如筆者最喜歡的前端開發利器brackets上有一個插件LESS Auto Compile,在保存less文件的時候,這個插件能自動編譯生成對應的css文件,不過需要在less文件開始插入如下的代碼,
//out:./test.css,compress:false,stricMath:true
在IDE開發工具Netbeans上也有類似的功能提供。
在Ubuntu系統上,你可以安裝LESS, 安裝命令如下:
sudo npm install -g less
注意:LESS是運行在node中的,因此ubuntu系統中需要預先安裝node.js
Ubuntu系統中編譯less文件的命令如下:
lessc styles.less > styles.css
3. LESS的四個典型應用案例
3.1 Netsting
LESS代碼如下:
.small-1 {
display: block;
zoom: 1;
.test {
font-size: 0;
height: 0;
}
}
編譯完成對應的CSS代碼如下:
.small-1 {
display: block;
zoom: 1;
}
.small-1 .test {
font-size: 0;
height: 0;
}
3.2 Variable
LESS代碼如下:
@p_w_picpaths: "../img";
body {
color: #444;
background: url("@{p_w_picpaths}/white-sand.png");
}
編譯完成對應的CSS代碼如下:
body {
color: #444;
background: url("../img/white-sand.png");
}
3.3 Pseudo Selector
LESS代碼如下:
.small-1{
display: block;
zoom: 1;
&:after,&:before {
content: " ";
display: block;
font-size: 0;
}
}
編譯完成對應的CSS代碼如下:
.small-1,
{
display: block;
zoom: 1;
}
.small-1:after,
.small-1:before,
{
content: " ";
display: block;
font-size: 0;
}
注意less中的 & 指的是parent selector, 在本例中指.small-1
3.4 Dynamic CSS Selector
LESS代碼如下:
.grid-gen(3);
.grid-gen(@n,@i:1) when (@i =<@n) {
.small-block-grid-@{i} {
width: (@i *100% /@n);
}
.grid-gen(@n,(@i + 1));
}
編譯完成對應的CSS代碼如下:
.small-block-grid-1 {
width: 33.33333333%;
}
.small-block-grid-2 {
width: 66.66666667%;
}
.small-block-grid-3 {
width: 100%;
}