less的基本使用

眾所周知，less是一門css預處理語言，其他的類似還有scss、Stylus 等，和js相似度比較高的就是less了。話不多說，我們來看less的使用。

Node.js 環境中使用 Less ：

npm install -g less

> lessc styles.less styles.css 

我用的vscode,編譯后css文件在vscode項目文件里顯示不出來，但是在本地路徑下查看得到。

 

在瀏覽器環境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>

 

1.變量的使用

Less中，變量由變量名稱和值組成。變量名以 @ 為前綴，由字母、數字、_和-組成，變量名稱和值之間用冒號隔開

@width:80%;
@height:100px;
@color:blue;

.box{
   width:@width;
   height:@height;
   background-color: @color;
   margin-top: 5px; 
}
.box1{
   width:@width+10px;
   height:@height;
   background-color: @color;
   margin-top: 10px; 
}
.box2{
   width:@width+20px;
   height:@height;
   background-color: @color;
   margin-top: 5px; 
}

 less變量也分全局變量和局部變量，不僅可以直接在屬性值中使用變量，還可以用類似 @{name} 的結構，以“插值”的方式在選擇器名、屬性名、URL、import、媒體查詢中使用變量。在編譯時，變量將被替換為它們相應的值。

 

2.混合（是一種將一組屬性從一個規則集包含到另一個規則集的方法）

.box1{
   width:@width+20px;
   height:@height;
   background-color: @color;
   margin-top: 5px; 
   .bordered();
}
.bordered{
   border-top:dotted 1px #ff0000;
   border-bottom:solid 2px #000000;
}

恩，就是定義一個類函數，然后引用它就行

 

3.嵌套

@width:80%;
@height:100px;
@color:pink;

.box{
   width:@width;
   height:@height;
   background-color: @color;
   margin-top: 5px; 
   &-p{
      color:red;
      font-size: 12px;
   }
   .username{
      color:#eeeeee;
      font-size: 16px
   }
}

等效於

.box{width:@width;height:@height;background-color:@color;margin-top: 5px; }
.box .box-p{color:red;font-size: 12px;}   
.box .username{color:red;font-size: 12px;} 

 

4.運算

官網翻譯哈：算術運算+、-、*、/可以對任何數字、顏色或變量進行運算。如果可能的話，數學運算在加、減或比較之前會考慮到單位並轉換數字。結果具有最左邊的顯式單位類型。如果轉換不可能或沒有意義，則忽略單位。不可能的轉換示例：px到cm或rad到%。

@count-1:5cm+10mm;
@count-2:5cm+10mm-2mm;
@count-3:5cm+10px;
@count-4:5cm-10px;
@count-5:5cm-10mm+50px;
@base:5%;
@filter:@base*2;
@color:#224488;
.d1{
   width:@count-1;
   background-color: @color+#111;
}
.d2{
   width:@count-2;
   background-color: @color+#222;
}
.d3{
   width:@count-3;
   background-color: @color+#333;
}
.d4{
   width:@count-4;
   background-color: @color+#444;
}
.d5{
   width:@count-5;
   background-color:@color+#fff;
}

效果圖

5.Escaping 

轉義允許您使用任意字符串作為屬性或變量值。在~“anything”或~“anything”中的任何內容都將按原樣使用，除了插值之外沒有任何更改。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

等效於

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

 

 

6.函數

這是我們最經常用到的東西，但是用法也很多，具體的還是參見函數手冊吧

@width:0.5;
@base:#c0b40c;
.class{
   width:percentage(@width);
   color:saturate(@base,5%);
   background-color: spin(lighten(@base, 25%), 8);
}

 

 

7.命名空間和訪問器

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
  }
   .font{...}
   .tab{...} 
}

#header a {
  color: orange;
  #bundle.button();  // 也可以寫成#bundle > .button
}

這也是為了方便函數復用了，命名空間選擇器了解一下。

命名空間不加（）也行。

.box{
   width:@width;
   height:@height;
   background-color: @color;
   .username{
      color:#eeeeee;
      font-size: 16px;
   }
}
.box1{
   .box.username;
   width:@width;
   height:@height;
   background-color: @color;
  

}

8.Map

從3.5以下的版本開始，可以使用mixin和ruleset作為值的映射

#library() {
  .colors() {
    primary: green;
    secondary: blue;
  }
}

#library() {
  .colors() { primary: grey; }
}

.button {
  color: #library.colors[primary];
  border-color: #library.colors[secondary];
}

//等效於
//.button { color: grey; border-color: blue; }　　

推薦大家去less官網學習，官網上夠詳細啦