CSS預處理器

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

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

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

Less簡介

官網(wǎng)
Less 是一門 CSS 預處理語言，它擴展了 CSS 語言侣集，增加了變量键俱、Mixin、函數(shù)等特性世分，使 CSS 更易維護和擴展编振。Less 可以運行在 Node 或瀏覽器端。

Less安裝

安裝lessc供全局使用

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

node環(huán)境安裝

less-loader的配置詳見

npm i less less-loader --save-dev

Less語法

Variables變量

1. 變量定義

變量可定義在使用前和使用后均可罚攀，變量申明可提升党觅。但我們建議是寫在less文件所有樣式的最前面，便于變量的統(tǒng)一管理

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

2. url中使用變量

可定義引用文件斋泄、圖片等的url前綴杯瞻，使用時在""引號內(nèi)通過@{}去使用變量

// 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. 變量名

在變量中引用變量旗唁，通過~"@{變量名}-屬性值"的方式實現(xiàn)”允可用于mixins函數(shù)中检疫，通過傳遞不同的參數(shù)，實現(xiàn)不同的樣式祷嘶，減少重復代碼屎媳。

// 基礎變量定義
@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} {
        // 變量定義，值根據(jù)類型有關(guān)
        @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選擇器的名稱)來實現(xiàn)

// 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)來實現(xiàn)

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則會出現(xiàn)多余的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密似，用于區(qū)分不同庫攒读，避免多庫使用時的沖突問題

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

編譯后

.class {
  color: black;
}

3. 參數(shù)化混合

多參數(shù)傳入時，參數(shù)可設置默認值辛友，參數(shù)與參數(shù)直接用;分隔

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

4. @arguments變量

可使用@arguments獲取傳入的所有參數(shù)

// 獲取所有參數(shù)
.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參數(shù)

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

.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關(guān)鍵詞

在mixin混合后用!important剪返，則mixin內(nèi)部的所有屬性都會繼承，加上!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防衛(wèi)

通過關(guān)鍵字when,來實現(xiàn)有條件的執(zhí)行,依據(jù)@media執(zhí)行規(guī)范邓梅。when中的條件判斷：比較運算符：>, >=, =, =<, <脱盲，true是唯一得“真”值。參數(shù)之間也可以進行比較日缨。邏輯運算符：'and' ,','(相當于or),'not'钱反。類型校驗函數(shù)：iscolor，isnumber匣距，isstring面哥，iskeyword，isurl毅待。是否包含單位函數(shù)：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 分離規(guī)則集

通過@符定義，分離規(guī)則集是一個css屬性外里、嵌套規(guī)則集怎爵、媒體聲明等的樣式集合。

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

// use detached ruleset
.top {
    @detached-ruleset(); 
}
// 函數(shù)
.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循環(huán)

通過when判斷可在函數(shù)內(nèi)循環(huán)調(diào)用某一函數(shù)盅蝗，直到不符合條件截止

.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需要配置+和+_實現(xiàn)
.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節(jié)點撒轮。可定義不同文件得重名得函數(shù)贼穆，在插件引用作用域中用。return false可調(diào)用該函數(shù)但不返回任意值兰粉。3.0版本之后故痊，函數(shù)可返回任意類型。

// function.js
module.exports = {
    install(less, pluginManager, functions) {
       // 將傳入的參數(shù)以,分割返回
        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常用的語法就總結(jié)到這里啦玖姑！哪里不對的歡迎指出哦~~
又是有收獲的一天愕秫！??

參考文章：

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