十分鐘帶你學會Less預編譯器

CSS預編譯器 Less

我們在書寫css樣式的時候經常會被權重給噁心到要吐血。所以預編譯器應運而生。預編譯器它就是使用一種更加優雅的方式來書寫css代碼，通過編譯器，將其轉換爲可以被瀏覽器識別的傳統css代碼

目前，最流行的預編譯器有LESS和SASS，由於它們兩者特別相似，我們在這裏介紹Less

less官網：http://lesscss.org/
sass官網：https://sass-lang.com/

LESS的安裝和使用

從我們前面介紹的就可以知道，要使用Less，必須要安裝Less編譯器

通過npm下載安裝

npm i -D less

安裝好了less之後，它提供了一個CLI工具lessc，通過該工具即可完成編譯lessc Less文件 編譯後的文件

lessc index.less index.css

新建一個index.less文件，編寫內容如下：

@color: red;
.redcolor {
    color: @color;
}

運行命令：

npx lessc index.less index.css

可以看到編譯之後的代碼：

.redcolor {
  color: red;
}

LESS的基本使用

• 變量：變量是通過@符號來表示的。

@color:#f40;
@width:100px;
@height:@width+10px;
.box{
    color:@color;
    width:@width;
    height:@height
}
//會被編譯爲:
.box{
    color:#f40;
    width:100px;
    height:110px;
}

• 混合：類似封裝一個方法，每次調用的時候，相當於使用這些屬性

.border { //混合方法
  border: 1px solid red;
}
.box1{
  color: #000;
  .bordered();
}
.box2{
  color: #f40;
  .bordered();
}
//會被編譯爲:
.box1{
  color: #000;
  border: 1px solid red;
}
.box2{
  color: #f40;
  border: 1px solid red;
}

• 嵌套：less語法中最nice的功能。一看代碼就明白。&符號表示當前選擇器的父級

.box{
  color: #000;
  .content{
    font-size: 14px;
    color: red;
    .title{
      font-size: 20px;
      font-weight: bolder;
      &:hover{
        color: blue;
      }
    }
  }
}
//會被編譯爲:
.box {
  color: #000;
}
.box .content {
  font-size: 14px;
  color: red;
}
.box .content .title {
  font-size: 20px;
  font-weight: bolder;
}
.box .content .title:hover {
  color: blue;
}

• 運算：算術運算符 +、-、*、/ 可以對任何數字、顏色或變量進行運算。計算的結果以最左側操作數的單位類型爲準。如果單位換算無效或失去意義，則忽略單位。

@width:100px;
@height:@width * 2 + 10 //210px;
@color:#224488;
@color2:@color/ 2 //#112244

• 函數：可以傳遞參數。Less 內置了多種函數用於轉換顏色、處理字符串、算術運算等

.center(@type:absolute){
  position: @type;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.box{
  .center(relative)
}
//會被編譯爲:
.box {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Less內置函數：更多內置函數，查看官方文檔。簡單舉例：

//if:如果2大於1,則顯示0,否則3px.和三目運算符有些類似
//iscolor:傳入一個值,判斷是否是顏色。
@some: foo;
div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}
//會被編譯爲:
div {
  margin: 0;
  color: black;
}

• 作用域：和js一樣，Less也有作用域

@color: red;
.box {
  @color: white;
  .content {
    color: @color; // white
  }
}
//會被編譯爲:
.box .content {
  color: white;
}

• 註釋：塊註釋會被保留，因爲和css註釋相同，行註釋會直接抹去

/* 
 * 塊註釋
 */
 @color: red;

 // 行註釋
 @color: white;
 .box{
   color: @color;
 }

//會被編譯爲------------------------
/* 
 * 塊註釋
 */
.box {
  color: white;
}

• 導入：可以用@import來導入外部的less樣式。比如導入我們寫的基礎樣式

base.less文件

@color:red;

index.less文件

@import "./base.less";
 .box{
   color: @color;
 }

最後會被編譯爲：

.box {
  color: red;
}

看到這裏，已經足夠我們應對日常開發中的less語法，如果你想更深度的學習。去官網看看吧