LESS讓css也支援變數,運算子,include,巢狀規則等等

技術小甜發表於2017-11-09

最近在網上看到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
.class1{
   color:#ccc;
   width:100px;
}
 
.class2{
   color:#ccc;
   width:120px;
}

 

   LESS寫法:
1
2
3
4
5
6
7
8
9
10
11
@color1: #ccc;
 
.class1{
   color:@color1;
   width:100px;
}
 
.class2{
   color:@color1;
   width:120px;
}

inlucde
    大家一定碰見過再某個規則中需要用的部分樣式跟另外1個規則樣式一樣,但沒辦法,我們只能copy過來,或者為元素指定多個class。但用了LESS後,我們不再需要這麼痛苦了。
    
    一般css寫法:
1
2
3
4
5
6
7
8
9
.red{
  color:red;border:1px solid red;
}
 
.class2{
   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;
}
 
.class2{
   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;
.class1{
font-size : @fontSize + 2;
}
.class2{
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    ,如需轉載請自行聯絡原作者


相關文章