【Less】給 CSS 加點料

歸子莫發表於2021-11-25

【Less】給 CSS 加點料

部落格說明

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

說明

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

image-20211122224805223

官網地址: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

公眾號-歸子莫,小程式-小歸部落格

相關文章