【Less】給 CSS 加點料

部落格說明

文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！

說明

相比Sass的高調宣言，Less就比較低調了，看下面官網的介紹

官網地址：Less中文網

什麼是 Less

已經知道了什麼是Sass的情況下，相信對什麼是Less應該也會比較的清晰了，它也是CSS的武器，讓CSS更加強大。（感覺最近說話有點樸素了哈）

官方回答：Less （Leaner Style Sheets 的縮寫）是一門向後相容的 CSS 擴充套件語言。

總結：既然官方都怎麼簡潔低調了，就不用太多花裡胡哨的了

安裝Less

可以使用 npm來安裝 Less。

npm install -g less

在瀏覽器中也可以使用

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

Less變數

變數這種東西當然是第一個來講的。Less 變數使用 @ 符號。

語法

@variablename: value;

示例

@base-font: Helvetica, sans-serif;
@my-color: red;
@my-font-size: 18px;

body {
  font-family: @base-font;
  font-size: @my-color;
  color: @y-font-size;
}

轉換為CSS程式碼

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

其實就是把變數的使用直接放入對應的值內。

變數的作用域

Sass的變數其實是有作用域的，Sass 變數的作用域只能在當前的層級上有效果，如果當前找不到，就像父節點上尋找

@myColor: red;

h1 {
  @myColor: green;   // 只在 h1 裡頭有用，區域性作用域
  color: @myColor;  // green
}
p {
  color: @myColor;  // red
}

Less的巢狀規則

這個是方便我們書寫的好東西，也是最顯而易見的新增。

巢狀

巢狀還是直接看程式碼來的痛快

less程式碼

nav {
  ul {
    margin: 0;
    padding: 20px;
  }
  li {
    color: #FFFFFF;
  }
}

css程式碼

nav ul {
  margin: 0;
  padding: 20px;
}
nav li {
  color: #FFFFFF;
}

有點像HTML的形式了

@規則巢狀和冒泡

@ 規則（例如 @media 或 @supports）可以與選擇器以相同的方式進行巢狀。

@ 規則會被放在前面，同一規則集中的其它元素的相對順序保持不變。這叫做冒泡（bubbling）。

// less
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

// css
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

匯入檔案@import

“匯入”的工作方式和你預期的一樣。你可以匯入一個 .less 檔案，此檔案中的所有變數就可以全部使用了。如果匯入的檔案是 .less 副檔名，則可以將副檔名省略掉。

現在就不要問為什麼要使用匯入檔案的方式了，問就是方便！就是真香！方便麵：真香？？？

語法

@import filename; //less可省略
@import "filename.css";

混合Mixins

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

示例

.important-text {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

咋一看，這不就是一個普通的class樣式嗎

使用混合

.text {
  .important-text();
}

less的使用混合，那是相當的隨意，非常好用！

對映Maps

從 Less 3.5 版本開始，你還可以將混合（mixins）和規則集（rulesets）作為一組值的對映（map）使用。

比如在做一個主題色的時候，就可以很好的選擇Less的對映。

示例

// less
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

// css
.button {
  color: blue;
  border: 1px solid green;
}

寫在最後的話

寫了Sass之後寫了less，發現了很多共通的，也有許多差一點，感覺知識又瀏覽了一遍。使用Less呢，如果你的應用需要使用多種主題，可以考慮使用less。

感謝

萬能的網路
以及勤勞的自己，個人部落格，GitHub測試，GitHub
公眾號-歸子莫，小程式-小歸部落格

【Less】給 CSS 加點料