【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。
感謝
萬能的網絡
公衆號-歸子莫，小程序-小歸博客