CSS模塊化：less

時間 2019-11-20

標籤 css 模塊化欄目 CSS 简体版

原文原文鏈接

less的安裝與基本使用
less的語法及特性

1、本地使用less的方法

Less （Leaner Style Sheets 的縮寫）是一門向後兼容的 CSS 擴展語言。是一種動態樣式語言，屬於css預處理語言的一種。
css

下載後找到less.js：less.js-2.5.3\dist\less.jshtml

也能夠直接使用CDN緩存： <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script> node

注意link的rel屬性： <link rel="stylesheet/less" type="text/css" href="styles.less" /> webpack

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <link rel="stylesheet/less" type="text/css" href="demo.less" />
 9 </head>
10 <body>
11     <div class="wrapper">
12         <div class="box">
13             <ul>
14                 <li><a href="">aaaa</a></li>
15                 <li><a href="">aaaa</a></li>
16                 <li><a href="">aaaa</a></li>
17                 <li><a href="">aaaa</a></li>
18                 <li><a href="">aaaa</a></li> 
19             </ul>
20         </div>
21     </div>
22     <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
23 </body>
24 </html>

測試結構代碼

 1 *{
 2     margin: 0;
 3     padding: 0;
 4     list-style: none;
 5     text-decoration: none;
 6     body{
 7         background-color: #ccc;
 8         .wrapper{
 9             position: relative;
10             width: 500px;
11             height: 500px;
12             margin:200px auto;
13             border: 1px solid #000;
14             .box{
15                 position: absolute;
16                 width: 200px;
17                 height: 200px;
18                 top: 50%;
19                 left: 50%;
20                 margin-top: -100px;
21                 margin-left: -100px;
22                 border:1px solid #000;
23             }
24         }
25     }
26 }

測試的Less樣式表

注意本地測試時須要放到本地服務下，在less.js中會有ajax網絡請求，直接使用本地文件路徑打開頁面會報錯。web

2、在nodejs環境中使用less

1.安裝less到全局ajax

npm install less -g

2.經過lessc指令將less文件編譯轉換成css文件npm

lessc demo.less demo.css

執行完成之後會生成一個demo.css文件，上面示例中的demo.less被編譯轉換成demo.css文件的代碼以下;緩存

 1 * {
 2   margin: 0;
 3   padding: 0;
 4   list-style: none;
 5   text-decoration: none;
 6 }
 7 * body {
 8   background-color: #ccc;
 9 }
10 * body .wrapper {
11   position: relative;
12   width: 500px;
13   height: 500px;
14   margin: 200px auto;
15   border: 1px solid #000;
16 }
17 * body .wrapper .box {
18   position: absolute;
19   width: 200px;
20   height: 200px;
21   top: 50%;
22   left: 50%;
23   margin-top: -100px;
24   margin-left: -100px;
25   border: 1px solid #000;
26 }

View Code

注：在webpack中使用less會在後期的webpack相關博客中解析。網絡

3、less的語法及特性

1.註釋編譯：less中的雙斜槓註釋不會被編譯到css文件中，可是包裹註釋會被編譯到css文件中app

// 雙斜槓註釋不會被編譯到css文件中
/*我能夠出如今css文件中*/

編譯後的結果：

/*我能夠出如今css文件中*/

2.變量與運算

1 @ince-blue:#5B83AD;
2 @light-blue:@ince-blue + #ff0;
3 //@light-blue的實際顏色是由@ince-blue + #ff0獲得的，實際顏色值是#ffffad
4 //在less中直接將變量應用到樣式中
5 background-color:@light-blue;

能夠運算的值固然還有像素值：

@list-width:300px;
@list-height:@list-width * 2;

2.1.變量也能夠說是可變插值，上面的示例中展現的都是使用變量來控制CSS樣式值，less中的變量除了能夠控制css樣式值之外，還能夠被用做選擇器名稱、屬性名稱、URL和@import語句。

2.1.1.變量控制選擇器

1 @my-selector:banner;
2 
3 .@{my-selector}{
4         // 這裏是類選擇器banner的具體的樣式
5 }

2.1.2.變量控制網址（URL）

1 @images: "../img";
2 
3 div{
4     background: url("@{imges}/mei.png");
5 }

2.1.3.變量與導入語句

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less"

2.1.4.變量與屬性

@property-color:color;

span{
    @{property-color}: #0ee;
}

2.1.5.變量與變量名

1 @fnord: "I am fnord.";
2 @var: 'fnord';
3 content: @@var;
4 
5 //編譯爲
6 content: "I am fnord.";

2.1.6.變量的做用域與延遲加載

 1 body{
 2     div{
 3         @size:14px;
 4         .p1{
 5             @size:18px;
 6             font-size:@size;
 7         }
 8         ul{
 9             font-size:@size;
10         }
11         .p2{
12             font-size:@size;
13         }
14     }
15 }

less做用域相似JS的塊級做用域，當前做用域有該變量就取當前做用域的變量值。當前做用域沒有的話就取沿着做用域鏈往外層做用域匹配。

2.1.6.1.可是要注意的是，這並不能說明less的變量做用域就徹底與JS的做用域相同，偏偏相反它們有很大的區別。好比延遲加載：

 1 div{
 2     @col-p:#ffo;
 3     p{
 4         color:@col-p;
 5         @col-p:#000;
 6     }
 7 }
 8 //編譯結果
 9 div p{
10     color:#000;
11 }

2.1.6.2.這種延遲加載還存在做用域上，例以下面這種狀況：

 1 //狀況以
 2 .lazy-eval {
 3   width: @var;
 4 }
 5 
 6 @var: @a;
 7 @a: 9%;
 8 //狀況二
 9 .lazy-eval-scope {
10   width: @var;
11   @a: 9%;
12 }
13 
14 @var: @a;
15 @a: 100%;

以上這兩種狀況都編譯成下面這css代碼：

.lazy-eval-scope {
  width: 9%;
}

2.1.6.3.若是出現當前做用域和外層做用域的延遲加載問題時，當前做用域有該變量直接使用當前做用域的，沒有當前做用域的話使用外層做用域的變量。

2.2混入：從一個規則集引入到另外一個規則集的方式。

在CSS代碼中常常會出現比較多的重複的代碼，可是在原生的CSS中沒有太好的方法能夠解決，固然也不是沒有，好比使用單獨的類名抽離，可是這帶來了HTML文件中的class屬性值會增長不少，在Less中採用了混合的語法解決了這個問題。

1 .border{
2     border:1px solid #000;
3 }
4 div{
5     .border;//引入邊框樣式
6 }

示例中的混合寫法，在引用時採用了簡寫方式，你們第一眼這代碼是否是特別像類的選擇器寫法，其實否則，less標準的混合引入是要在後面帶小括號的，因此示例中的標準寫法是「.border()」。這一種簡寫和一種標準寫法都沒什麼差異，具體遵循本身的開發文檔的標準或者我的習慣就好。

看到這個引入方式是否是有了一些啓發呢？既然引入標準語法是能夠帶小括號，這個小括號就不是隨便放在那裏的，而是有必定的實際意義。這個實際意義就是混入能夠理解爲JS中的方法，在定義的時候能夠定義形參，而後在引用的時候傳入實參：

1 .border(@width,@color){
2     border:@width solid @color;
3 }
4 div{
5     .border(1px,#000);
6 }

還可使用默認值定義混入規則：

1 .border(@width:1px,@color:#000){
2     border:@widht solid @color;
3 }
4 div{
5     .border;
6 }

這個看上去比JS更強大了是否是，關於混入還有比較多的特性，後面再具體來剖析。

2.3導入：基於混入的模式，當在一個less文件中存在比較多的混入引入模式，又或者比較多的混入能夠在多個less中重複引用，這時候就能夠用一個獨立的less文件來抽離這些混入模式，而後再將這個公共的less文件導入到各個依賴的less中，這也就實現了less的模塊化。經過下面這個border實現三角形示例演示導入：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <link rel="stylesheet/less" href="trangleStyle.less">
 9 </head>
10 <body>
11     <div class="wrapper">
12         <div class="box"></div>
13     </div>
14     <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
15 </body>
16 </html>

HTML結構代碼

 1 .trangle(T,@width,@color){
 2     width: 0;
 3     height: 0;
 4     border-width: @width;
 5     border-style: solid;
 6     border-color:@color transparent transparent transparent;
 7     border-bottom-width: 0;
 8 }
 9 .trangle(R,@width,@color){
10     width: 0;
11     height: 0;
12     border-width: @width;
13     border-style: solid;
14     border-color:transparent @color transparent transparent;
15     border-left-width: 0;
16 }
17 .trangle(B,@width,@color){
18     width: 0;
19     height: 0;
20     border-width: @width;
21     border-style: solid;
22     border-color:transparent transparent @color transparent;
23     border-top-width: 0;
24 }
25 .trangle(L,@width,@color){
26     width: 0;
27     height: 0;
28     border-width: @width;
29     border-style: solid;
30     border-color:transparent transparent transparent @color;
31     border-right-width: 0;
32 }

less依賴模塊

重點來看這個主入口less代碼：經過@import引入外部less

 1 *{
 2     padding: 0;
 3     margin: 0;
 4     @width:300px;
 5     @color:red;
 6     @import url(./trangle.less);//也能夠採用字符串寫法：@import './trangle.less'
 7     body{
 8         .wrapper{
 9             position: absolute;
10             width: @width;
11             height: @width;
12             top: 50%;
13             left: 50%;
14             margin-top: -@width/2;
15             margin-left: -@width/2;
16             .box{
17                 .trangle(R,@width/2,@color);
18             } 
19         }
20     }
21 }