簡單的LESS Tutorial

簡單的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代碼如下:

@images: "../img";
body {
   color: #444;
   background: url("@{images}/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%;
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章