【愣錘筆記】溫故而知新、嗯！來花幾分鐘時間極速重溫less高級核心特性

你們能夠回想一下，上次學習less/sass是何時了？平時是否是除了嵌套、變量貌似也沒用其餘啥了？知識久了，部份內容也就遺忘了。可是學會的東西再撿起來是很快的！

是時候從新 堅挺 一下了！什麼，堅挺？呸，什麼玩意，重來。

是時候該從新新 硬 一下了！哦～？貌似也不對～硬一下？？？發刻～～～

是時候從新新 溫習 一下了！！！嗯，這就說對了～

好，基本的安裝就不提了，你們在在各類vue、react等項目，配置應該比誰都熟悉了。先說說和導入相關的吧，筆記使用的前提仍是要導入的。

導入

• css的導入

// 1.必須放在全部其餘規則前面，即導入語句放在最頂部
// 文件地址是相對路徑
@import url('./test.css');
複製代碼

• less的導入

// 文件地址是相對路徑
// 沒有url包裹地址
@import '../../styles/common.less';

// 能夠省略.less的後綴
// 省略後做爲less文件導入
@import '../../styles/common';

// 能夠經過導入配置，定義更靈活的導入方式
// 基本使用
@import (配置1, 配置2 ……) '地址';

// eg1:將導入文件一概做爲less文件處理
@import (less) './test.css';

// eg2: 一概是爲css文件導入，不管文件名是什麼
@import (less) './test.less' // 等同於@import url('./test.less');

// eg3: 屢次導入只導入一次
// 這也是默認參數
@import (once) './test';
@import (once) './test';
// 最終只導入一次
複製代碼

既然使用了less，那麼全部的導入方式就統一成less的導入，不要混用；
全部的樣式文件寫成less，不要再使用css文件，保持統一。

變量

像less/sass/scss等這些css預處理器，給咱們提供了很方便的一個特性就是能夠在css中定義變量進行使用。好比咱們能夠將全局的主題色、輔色、描述色等定義成變量在全部樣式文件中使用，這樣即便設計的某些大範圍的修改主題色的時候，咱們修改起來也是很方便的。

• 基本用法

@開頭用來定義變量，冒號後面爲變量的值。

// 定義變量
@main-color: #f00;
@head: header;
@width: width;

// 咱們將變量做爲屬性值使用
.header {
    color: @main-color;
}

// 能夠將變量做爲css屬性使用
.header {
    @{width}: 100px;
}

// 也能夠做爲選擇器使用
@{head} {
    width: 100px;
}
// 等同於
.header {}
複製代碼

• 變量只能定義一次，重複定義取最後定義的值。相似於js中的變量覆蓋。

// 重複定義兩個變量
@color1: red;
@color1: blue;

// 最終爲藍色
.test__less {
    color: @color1;
}
複製代碼

less的變量這個特性確實很好用，聽說css4的變量提案也在如火如荼的進行中，但願儘快成爲標準在各大瀏覽器普及吧！

嵌套

在之前不支持嵌套的時候，咱們編寫css每每須要一級一級的寫，致使多些不少選擇器，真的是刀耕火種的心酸！

不過BEM的css規範，從某種程度上減輕這個問題，可是BEM的規範也引起了不少小夥伴對它的吐槽吧！蘿蔔青菜、各有所愛。

less的嵌套，仍是蠻好用的，能夠很清晰的一眼看出css的結構和對應的html結構，也不用多寫不少選擇器。可是和BEM規範一塊兒使用時，你們作好取捨吧。

.header-container {
    .avatar {
        width: 60px;
        height: 60px;
    }
    .user-name {
        
    }
}
複製代碼

這個很簡單就很少說了，就是支持嵌套的寫法而已。

計算

less中容許+-*/的計算，不說我的而言，該特性用的很少，已知的值是不必算的，可是對於未知的須要計算獲得的，仍是蠻好用的。

@fs: 12px;

.test__less {
    .flex;
    font-size: @fs * 2;
    font-weight: 200 * 2;
}

// 編譯結果
.text_test__less__UJwa4 {
    display: flex;
    font-size: 24px;
    font-weight: 400;
}
複製代碼

也很少說了，和小學加減法同樣，看例子便可。

轉譯（原樣輸出）

轉譯，即不會對字符串內進行任何操做，而是原樣輸出。這樣在某些咱們不須要less執行操做對時候能夠用到，例如calc屬性。

.test__less {
  color: ~"#f00";
}
// 輸出：
.text_test__less__UJwa4 {
    color: #f00;
}

// calc的實際例子
.test__less {
  position: fixed;
  top: 0;
  height: calc(~"100vh - 40px")
}
// 編譯
.text_test__less__UJwa4 {
    position: fixed;
    top: 0;
    height: calc(100vh - 40px);
}
複製代碼

關於原樣輸出，平時用的最多的仍是像calc等這樣須要原樣輸出的部分，由於若是你不加原樣輸出，那麼less在編譯階段就會認爲你的減號等操做符是須要計算的，就自動幫你去計算了，結果天然也是不對的。

函數

less內置了不少函數，例如Math、類型函數等等。

這塊內容比較簡單，可是也是比較多的，能夠查看官網手冊去了解一下吧。

less函數手冊

命名空間和選擇器

.head {
  .avator(@width) {
    width: @width;
  }
}
.test__less {
    /* 經過選擇器選擇到.avatar的樣式 */
    .head > .avator(20px);
}

/* test__less的編譯結果 */
.text_test__less__UJwa4 {
    width: 20px;
}
複製代碼

擴展

less支持擴展語法，最終實現是在css中將幾個不一樣的選擇器，經過逗號隔開並列的寫法。

參數實質是選擇器（例如.head 也能夠是.head .avator等），能夠有多個參數。

// 定義普通的一個class
.head {
  font-size: 12px;
}
// 定義另外一哥普通的class
.foot {
  font-weight: bold;
}

// 擴展的寫法1:
// 將head和foot擴展到test上，最終使得test同時擁有head和foot的樣式
.test:extend(.head, .foot) {
  color: red;
}

// 擴展的寫法2:
// 這兩種是等效的
.test {
    &:extend(.head, .foot);
    color: red;
}

// 也能夠給僞類添加
.test:hover {
  &:extend(.head, .foot);
  color: red;
}
複製代碼

能夠看到寫法（1）和（2）編譯後的結果，是在css中並列的寫法：

以這裏爲例，本質都是使得.test擁有.head或.foot的樣式效果，而.head或.foot不會擁有.test的樣式效果。

extend拓展，很大程度上能夠用來複用選擇器減小編譯後的css樣式代碼。

可是，實際css編寫過程當中，咱們是推薦儘可能減小樣式的繼承、減小絕對的層級嵌套、減小樣式直接的相互依賴。

如此，才能在html結構的變化後減小css層級受到的影響、避免部分樣式修改後影響到其餘樣式。

這也正是高內聚、低耦合原則中低耦合概念在css編寫中的體現。即，模塊直接的聯繫應該儘可能弱化，這能夠能夠演變爲css直接互相的依賴關係應該儘可能弱化。

BEM規範也是推薦如此的作法。

Mixins混入

• 基本用法

通俗一些，有點相似於將其餘class/id等當作是定義好的函數，這些函數執行後會輸出一段樣式，而後在其餘函數（class/id等等樣式）內部調用這些函數，而後獲得他們輸出的樣式。

// 定義普通的兩個class
.head {
  font-size: 12px;
}
.foot {
  font-weight: bold;
}

// 在test類內部混入head和foot
// 能夠看到既可使用括號，也能夠不使用括號
.test {
    // 相似於調用head函數獲得他的樣式
    .head();
    .foot;
}
複製代碼

• 建立mixins

能夠只建立，不輸出mixins

// 將head變成一個mixins
.head () {
    width: 100px;
}

// 相似於只定義了函數，可是沒用到它，
// 那麼就會在構建的階段就被去冗掉了，
// 最終樣式裏，不會有以下樣式：
.head {
    width: 100px;
}
複製代碼

• Mixins帶參

支持傳遞多個參數，在調用mixins的給參數賦值，相似於函數的xing形參和實參：

// 定義一個mixins，攜帶了兩個參數
.head(@fs, @color) {
  font-size: @fs;
  color: @color;
}
// 調用的時候，給mixins傳遞參數
.test {
  .head(20px, blue);
}
複製代碼

參數支持默認值，相似於es6中函數形參定義時給一個默認值同樣：

// @color參數給一個默認值爲red
.head(@fs, @color: red) {
  font-size: @fs;
  color: @color;
}
// 調用的時候，給mixins傳遞參數
.test {
  .head(20px);
}
複製代碼

參數順序能夠不一一對應：

// 例如，定義mixins時的參數是@fs和@color
.head(@fs, @color) {
  font-size: @fs;
  color: @color;
}
// 可是我使用的時候能夠像下面這樣，不按順序傳參數
// 最終效果也是同樣的
.test {
    // 沒有按順序傳參
    // 可是這時須要帶上參數名再賦值
    .head(@color: red, @fs: 20px);
}
複製代碼

• 高級參數

@arguments在mixins中指代全部參數:

// 利用@arguments指代上面的三個參數
.head(@size, @type, @color) {
  border: @arguments;
}
.test {
  .head(1px, solid, red);
}
複製代碼

@rest 擴展運算符

less中用...做爲擴展運算符，相似於es6的擴展運算符，可是有區別，指代後續的參數。

// 通常用@rest做爲less的擴展運算符變量
// 用其餘字符可能會引發相關的lint不經過
.head(@rest...) {
  border: @rest;
}
.test {
  .head(1px, solid, red);
}

// 另外一種狀況
// @size後面的才做爲後續參數
.head(@size, @rest...) {
    border: @size @rest;
}
.test {
  .head(1px, solid, red);
}
複製代碼

• mixins做爲函數使用

mixins做爲函數使用，將返回其內部定義的變量，在調用mixins的做用域內可使用其返回的變量：

// 定義一個mixins
// 內部定義了兩個變量
.head() {
  @color1: red;
  @color2: blue;
}
// head做爲函數被調用
// test內部可使用head內部定義的變量
// 即便先使用，後調用也能夠
.test {
  color: @color2;
  .head();
}
複製代碼

注意：less中的變量都是延長加載的，能夠先使用，後面再定義。本質是less執行編譯的時候，先分析語法樹，而後先提取對應的變量，最後纔是編譯成css。

• 邏輯運算符

支持>，>=，=，=<，<運算符，布爾只支持true。

// 定義head這個mixins，根據參數的值，展現不一樣內容
.head(@size) when(@size > 50) {
  color: red;
}
.head(@size) when(@size < 50) {
  color: blue;
}
// 傳入參數80
.test {
  .head(80);
}
複製代碼

支持其餘內置函數檢測

// 只有@color參數爲color類型時，纔有下面的樣式
.head(@color) when(iscolor(@color)) {
  color: @color;
}
// 顏色會是紅色
.test {
  .head(#f00);
}
// 沒有任何樣式內容
.test {
  .head(123);
}
複製代碼

其餘的還有檢測函數還有：
iscolor
isnumber
isstring
iskeyword
isurl

其餘內容

• 父選擇器

用&符號表示父選擇器

// 父選擇器演示
.test {
    // test hover時會是藍色
    &:hover {
        color: blue;
    }
    // test後一個兄弟test，是紅色
    & + & {
        color: red;
    }
    // test內部的test是黃色
    & & {
        color: yellow;
    }
}

// 對應的html
<div className="test">
    test
    <div className="test">內部test</div>
</div>
<div className="test">
    test
</div>
複製代碼

父選擇器應該是很經常使用的了，不必多說。

文章參考

less中文網

w3cschool的less教程

關於less的介紹就到這了，有興趣的能夠繼續深刻學習。若是你看到了這，可能前先後後也就幾分鐘的時間。可是花這幾分鐘能夠將部分less已經忘記的特性重拾起來，相信也是一種收穫吧。

最後，學而時習之，不亦說乎！祝小夥伴們在前端領域繼續馳騁疆場、大殺四方吧！

百尺竿頭、日進一步 我是愣錘，歡迎分享與交流。