Less常用語法總結

CSS預處理器

原文鏈接
CSS 預處理器是什么？一般來說，它們基於 CSS 擴展了一套屬於自己的 DSL，來解決我們書寫 CSS 時難以解決的問題：

• 語法不夠強大，比如無法嵌套書寫導致模塊化開發中需要書寫很多重復的選擇器；
• 沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護。

所以這就決定了 CSS 預處理器的主要目標：
提供 CSS 缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。這不是錦上添花，而恰恰是雪中送炭。

Less簡介

官網
Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。

Less安裝

安裝lessc供全局使用

// 安裝
npm install less -g
// 查看less版本號
lessc -v
// 將.less文件轉換成.css文件
lessc xxx.less xxx.css

node環境安裝

less-loader的配置詳見

npm i less less-loader --save-dev

Less語法

Variables變量

1. 變量定義

變量可定義在使用前和使用后均可，變量申明可提升。但我們建議是寫在less文件所有樣式的最前面，便於變量的統一管理

// Variables
@color: red;
// Usage
a {
  color: @color;
}

2. url中使用變量

可定義引用文件、圖片等的url前綴，使用時在""引號內通過@{}去使用變量

// Variables
@images: "../img";

// Usage
.less-demo {
  background: url("@{images}/bg.png");
}

3. 選擇器可變插值

定義變量可用於選擇器和樣式屬性中，通過@{}的方式使用。可通過更改不同的less變量前綴，達到換膚的目的。

// 定義前綴
@prefix: less;
// 使用
.@{prefix}-demo {
    .@{prefix}-left {}
    .@{prefix}-right {}
}
// 選擇器
@selector: test;
.@{selector} {
    color: red;
}
// 屬性
@property: color;
.top {
  @{property}: red;
  background-@{property}: gray;
}

4. 變量名

在變量中引用變量，通過~"@{變量名}-屬性值"的方式實現。可用於mixins函數中，通過傳遞不同的參數，實現不同的樣式，減少重復代碼。

// 基礎變量定義
@prefix：less;
@left-width: 40%;
@left-color: blue;
@right-color: red;
@right-width: 60%;
// usage
.content-color(left);
.content-color(right);
// function
.content-color(@content) {
    .@{prefix}-@{content} {
        // 變量定義，值根據類型有關
        @content-font-color: ~"@{content}-color";
        @content-width: ~"@{content}-width";
        color: @@content-font-color;
        width: @@content-width;
        .bordered;
    }
}

編譯后

.less-left {
  color: blue;
  width: 40%;
  border: 1px solid #333;
}
.less-right {
  color: red;
  width: 60%;
  border: 1px solid #333;
}

Extend擴展

1. 擴展

A選擇器想要擁有B選擇器的樣式，可通過&:extend(B選擇器的名稱)來實現

// h1標簽擴展擁有h2標簽的樣式屬性
h1 {
    &:extend(h2);
    font-size: 16px;
}
h2 {
    color: #333;
}

編譯后

h1 {
    font-size: 16px;
}
h1, h2 {
    color: #333;
}

2. 擴展all

B選擇器有多個樣式，想要A選擇器擁有B選擇器所有的樣式，可通過:extend(B選擇器 all)來實現

h2, .test-extend {
    color: #333;
}
.test-extend {
    font-size: 14px;
}
// 擴展某一選擇器全部的樣式屬性
.test-expand-content:extend(.test-extend all) {
    text-decoration: underline;
}

編譯后

h2, .test-extend, .test-expand-content {
    color: #333;
}
.test-extend, .test-expand-content {
    font-size: 14px;
}
.test-expand-content {
    text-decoration: underline;
}

Mixins混合

1. 選擇器混合

定義class樣式，可在其他樣式用直接使用該樣式。這種方式需要注意的是定義class樣式會被輸出，如果沒有用到該樣式，則建議不要使用定義樣式的方式，生成多余的css代碼。

// 會輸出樣式
.bordered {
    border: 1px solid #333;
}
.demo {
    .left {
        width: 40%;
        .bordered;
    }
    .right {
        width: 60%;
        .bordered;
    }
}

編譯后

// 如果用不到bordered這個class則會出現多余的css樣式
.bordered {
    border: 1px solid #333;
}
.demo .left {
    width: 40%;
    border: 1px solid #333;
}
.demo .right {
    width: 60%;
    border: 1px solid #333;
}

2. 命名空間

通過#id名嵌套mixin，用於區分不同庫，避免多庫使用時的沖突問題

#my-library {
  .my-mixin() {
    color: black;
  }
}
// which can be used like this
.class {
  #my-library > .my-mixin();
}

編譯后

.class {
  color: black;
}

3. 參數化混合

多參數傳入時，參數可設置默認值，參數與參數直接用;分隔

// 不會輸出樣式
.color(@bg: f5f5f5; @color: #333) {
  background-color: @bg;
  color: @color;
}
.left {
  .color();
}
.right {
  .color(#f0f0f0; #666);
}

4. @arguments變量

可使用@arguments獲取傳入的所有參數

// 獲取所有參數
.box-shadow(@x: 0; @y: 0; @blur: 5px; @color: rgba(0, 0, 0, 0.2)) {
-webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
        box-shadow: @arguments;
}
.demo{
  .box-shadow(2px; 5px);
}

5. rest參數

... 代表可變個數（0-N）的參數，@rest表示指定參數之外的剩余所有參數

.mixin(...) {        // matches 0-N arguments
.mixin() {           // matches exactly 0 arguments
.mixin(@a: 1) {      // matches 0-1 arguments
.mixin(@a: 1; ...) { // matches 0-N arguments
.mixin(@a; ...) {    // matches 1-N arguments
.mixin(@a; @rest...) {
   // @rest is bound to arguments after @a
   // @arguments is bound to all arguments
}

6. !important關鍵詞

在mixin混合后用!important，則mixin內部的所有屬性都會繼承，加上!important

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

編譯后

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

Mixin Guards防衛

通過關鍵字when,來實現有條件的執行,依據@media執行規范。when中的條件判斷：比較運算符：>, >=, =, =<, <，true是唯一得“真”值。參數之間也可以進行比較。邏輯運算符：'and' ,','(相當於or),'not'。類型校驗函數：iscolor，isnumber，isstring，iskeyword，isurl。是否包含單位函數：ispixel，ispercentage，isem，isunit。

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

detached ruleset 分離規則集

通過@符定義，分離規則集是一個css屬性、嵌套規則集、媒體聲明等的樣式集合。

// declare detached ruleset
@detached-ruleset: { background: red; };

// use detached ruleset
.top {
    @detached-ruleset(); 
}
// 函數
.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200) { @rules(); }
  html.lt-ie9 &                       { @rules(); }
}

header {
  background-color: blue;

  .desktop-and-old-ie({
    background-color: red;
  });
}
// scope
#space {
  .importer-1() {
    @detached: { scope-detached: @variable; }; // define detached ruleset
  }
}

.importer-2() {
  @variable: value; // unlocked detached ruleset CAN see this variable
  #space > .importer-1(); // unlock/import detached ruleset
}

.use-place {
  .importer-2(); // unlock/import detached ruleset second time
   @detached();
}

Loops循環

通過when判斷可在函數內循環調用某一函數，直到不符合條件截止

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

輸出：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

Merge合並屬性

通過+和+_進行樣式合並，前者用逗號隔開，后者用空格隔開

// merge需要配置+和+_實現
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}
.mixin() {
  transform+_: scale(2);
}

.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

輸出：

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

.myclass {
  transform: scale(2) rotate(15deg);
}

Parent Selectors父選擇器&

.header {
    & &-title {
    }
    &-title {
    }
    &:first-child {
    }
    .less & {
    }
    & & {
    }
}

編譯后

.header .header-title {
}
.header-title {
}
.header:first-child {
}
.less .header {
}
.header .header {
}

@plugin插件

@plugin "my-plugin";定義一個插件JS文件，返回一個Less節點。可定義不同文件得重名得函數，在插件引用作用域中用。return false可調用該函數但不返回任意值。3.0版本之后，函數可返回任意類型。

// function.js
module.exports = {
    install(less, pluginManager, functions) {
       // 將傳入的參數以,分割返回
        functions.add('args', node => {
            if (typeof node.value === 'string') {
                return node.value;
            }
            let result = [];
            for (let i = 0; i < node.value.length; i++) {
                result.push(node.value[i].value);
            }
            return result.join(', ');
        });
    }
};
// usage
@plugin "./functions";
.transition(...) {
  transition-property: args(@arguments);
  transition-duration: 0.2s;
}

Less常用的語法就總結到這里啦！哪里不對的歡迎指出哦~~
又是有收獲的一天！🆙

參考文章：

1. css預處理的介紹
2. less總結
3. Less教程