CSS處理器-Less/Scss

image.png

HTML系列：

CSS系列：

01、CSS處理器

1.1、什麼是CSS預處器？

CSS預處器（CSS Preprocessor /ˌpriːˈprəʊsesə/）是基於CSS之上的一種「新」的CSS語言，在CSS基礎上添加了一些編程特性。可以認為是CSS的擴展，或CSS的超集，讓CSS的編寫更簡潔、功能更強大。

🔴 那為什麼需要CSS預處理器呢？—— 主要是為了加強CSS，解決CSS的一些弊端：

  • 可讀性差：全是一堆屬性集合，沒有層級管理。
  • 可維護性差：不支援復用、繼承，導致很多重複程式碼。
  • 不夠靈活：缺少一些編程特性的支援，程式碼編寫不夠靈活、智慧。

CSS預處器就是為了解決這些問題， 為了像其他程式語言一樣，編寫簡潔、維護更容易、可讀性強、適應性強。

🟢 CSS預處器特性：

  • 選擇器嵌套：支援選擇器嵌套、屬性嵌套，呈現層級關係，使得結構更清晰、更易維護。
  • 變數、函數、運算等編程特性：支援更靈活、強大的變數、函數、運算、邏輯控制，如常用的字元、顏色、數字運算和函數。
  • 程式碼復用：混用Mixin、繼承等。
  • CSS輸出：預處理器的基本原理就是在開發編譯階段，把預處理CSS程式碼翻譯成標準的CSS程式碼，然後瀏覽器執行標準CSS程式碼。

image

1.2、CSS預處理框架

CSS預處器比較流行的實現語言：Sass/Scss、Less、Stylus

  • Sass/Scss：Scss 是 Sass的升級版，Scss 是最成熟、最穩定、最強大的CSS預處理器，兼容所有CSS版本，使用廣泛。
  • Less：Less （/les/ ）簡潔、學習容易，功能也比較完整。
  • stylus：富於表現力、動態的、健壯的 CSS。
比較 Less Sass/Scss
變數申明 @vname: #FFF color : @vname
變數插值：@{XXXX}		 $vname: #FFF color : $vname
變數插值：${XXXX}
嵌套規則 選擇器嵌套：div p a{} = div{ p{ a{}}} 選擇器嵌套：同Less
程式碼復用 混入（Mixin）：復用（拷貝）程式碼
.class{ } { .class() }
@extend繼承 aclass :extend(pclass)		 混入（Mixin）：復用（拷貝）程式碼
@minxin class{ } { **@include** class}
@extend繼承：原理是用了並集處理器放公共樣式
條件語句 不支援，用if()函數模擬 ✅ 支援：if{ } else ，for{}循環
運行環境 JS編寫的，可以運行在Node、瀏覽器環境 有Ruby版本、新的dart版本，需要安裝對應環境

1.3、後處理器

後處理器（post-processor），就是寫完CSS後，對CSS進行再加工處理，如cssNext、autoprefixer，用來對CSS程式碼進行兼容性完善、程式碼壓縮等處理。

02、Less

中文文檔：//less.bootcss.com/

在線轉換工具：//www.wetools.com/less-to-css

2.1、安裝與使用

在開發階段，直接引用less，需引入less的JS文件。

<link rel="stylesheet/less" type="text/css" href="styles.less" />
/* less的JS文件 */
<script src="//cdn.jsdelivr.net/npm/less@4" ></script>

正式環境肯定是要提前編譯輸出CSS文件，這就需要安裝less包來編譯less程式碼。需要NodeJS環境，然後通過npm指令安裝：npm install -g less

2.2、基本語法

🔸嵌套：選擇器嵌套/&父級

這個功能確實很好用，程式碼結構都清晰了，多用於後代選擇器，其他各種（關係）選擇器都可以用。

🔸申明：跟HTML結構一樣，嵌套使用。

🔸父選擇器&：用&符號標識父級，偽元素、屬性嵌套必須用&開頭。

.less 示例 & 編譯結果示例程式碼：

/* <p> <span>子曰：</span> <span primary>道聽而塗說，德之棄也。</span> </p> */
@pcolor: gold;
#quote(@content, @vertical, @padding) {
    content: @content;
    vertical-align: @vertical;
    padding: @padding;
}
p {
    background-color: lighten(@pcolor, 30%);
    border:@pcolor solid 10px;
    border-image:repeating-linear-gradient(-45deg,darken(@pcolor, 5%) 5px,lighten(@pcolor, 5%) 10px) 10;
    text-align: center;
    line-height: 3em;

    span {
        color: darken(@pcolor, 20%);
        font-size: 1.5em;
        font-weight: 500;
        font-family: '匯文明朝體';
        &[primary] {
            padding: 0 5px;
            &::before {
                #quote("⌈", 4px, 0 6px 0 0);
            }
            &::after {
                #quote("⌋", -4px, 0 0 0 6px);
            }
        }
    }
}

» 編譯結果

/* <p> <span>子曰：</span> <span primary>道聽而塗說，德之棄也。</span> </p> */
p {
  background-color: #ffef99;
  border: gold solid 10px;
  border-image: repeating-linear-gradient(-45deg, #e6c200 5px, #ffdb1a 10px) 10;
  text-align: center;
  line-height: 3em;
}
p span {
  color: #998100;
  font-size: 1.5em;
  font-weight: 500;
  font-family: '匯文明朝體';
}
p span[primary] {
  padding: 0 5px;
}
p span[primary]::before {
  content: "⌈";
  vertical-align: 4px;
  padding: 0 6px 0 0;
}
p span[primary]::after {
  content: "⌋";
  vertical-align: -4px;
  padding: 0 0 0 6px;
}

image.png

🔸注釋

同JS，支援單行、多行。

  • 單行注釋：// 編譯後會丟掉，大概是因為CSS中不支援。
  • 多行注釋：/**/ 編譯後會保留

🔸@import導入

  • 導入css
  • 導入less，可省略擴展名，編譯時會輸出程式碼。
@import "../css/default.css";
@import "t2";  /* t2.less */

🔸運算符+、-、*、/

支援任何單位的數值、顏色、變數的運算，結果採用最左邊的單位。

  • +、-，會自動做部分單位換算，轉換失敗就忽略單位。
  • 乘法和除法不作轉換。

2.3、@變數：運算/插值/~轉義

@ 開頭申明變數，支援表達式。可以定義在外面，也可以定義在規則集內部，這會影響他們的作用域。

🔸作用域：同JS，有提升的效果（同一作用域內，可以先使用後申明），作用域向上查找（繼承）。

🔸變數插值：用在類名上，替換為變數值，也是一種變數使用方式，需帶花括弧：@{vname}

🔸~轉義：包含特殊字元，需要引號包起來的變數值，申明格式：@var : ~'value'; @var : ~"value";

@margin-vertical: 0.5em;
@line-height: 1.5em + @margin-vertical;     /**最好單位一致，px+em會轉換失敗 **/
@li-name: li;
@media768: ~'(min-width: 768px)';   /** 需要引起來的字元 **/
@border: 1px solide #000;

@media @media768 {
    @{li-name} {        /** 變數插值，也是一種使用方式，括起來 **/
        background-color: aliceblue;
        margin: @margin-vertical 0;        /** 使用變數 **/
        line-height: @line-height;
        border: @border;
    }
}

» 編譯結果：計算並替換最終值

@media (min-width: 768px) {
    li {
        background-color: aliceblue;
        margin: 0.5em 0;
        line-height: 2em;
        border: 1px solide #000;
    }
}

2.4、程式碼復用：Mixins/extend

混合（Mixins）就是復用程式碼，復用一組CSS規則、一條規則值，類似JavaScript的函數調用。復用（複製）程式碼，直接把一個類裡面的程式碼拷貝過來，命名空間的混入也一樣，把類當函數調用。

🔸申明：class(){} 類名一般為#、.開頭，括弧()可帶、可不帶。帶括弧時，編譯不會輸出該申明程式碼，so，建議一般都帶上括弧。

🔸使用：class()，就像函數調用一樣，把class{}中的規則程式碼複製過來。

.border
{
    border: 1px solid #66F;
    border-left-width: 3px;
}

li {
    padding: 0 5px;
    .border();  /*復用（複製）程式碼*/
    }

» 編譯結果：📢 注意上面被複用的類.border也會編譯輸出，如不需要申明時加上括弧()。

.border {
    border: 1px solid #66F;
    border-left-width: 3px;
}
li {
    padding: 0 5px;	
    /*復用（複製）程式碼*/
    border: 1px solid #66F;
    border-left-width: 3px;
}

🔸命名空間：混合嵌套

按照 命名空間來組織管理復用的（mixins）程式碼。

🔸申明：就是多層混合的嵌套，類似JavaScript裡面的Object對象，可以通過.來鏈式調用。

🔸使用：使用的時候也是按照嵌套路徑調用。

#namespace() {	 /** 申明命名空間 **/
    .button-orange {	/** 申明了兩個子類 **/
        background-color: orange;
        border: @border;
        &:hover {background-color: lighten(orange,20%);}
    }
    .button-blue{
        background-color:skyblue;
        border: @border;
        &:hover {background-color: lighten(skyblue,20%);}
    }
}
div{
    button{
        #namespace.button-blue();  	/** 使用混入，通過命名空間調用 **/
        }
}

» 編譯結果：

div button {
    background-color: skyblue;
    border: 1px solide #000;
    /** 使用混入，通過命名空間調用 **/
}
div button:hover {
    background-color: #def2fa;
}

🔸映射Maps：混合[子屬性]

像JavaScript中的Map一樣使用，復用規則裡面的屬性值。

🔸使用：用[]的形式獲取css屬性值，#map[pname]

#border(){
    border: 1px solid black;
    color: red;
}
div {
    #border();
    border-color: #border[color];
}

» 編譯結果：

div {
    border: 1px solid black;
    color: red;
    border-color: red;
}

🔸混合參數(@para)

混入支援帶參數，在使用的時候傳入參數，參數支援默認值，這個還挺好用的！

#namespace {
    .button(@color:orange) {  /* 帶參數，並設置了默認值 */
        background-color: @color;
        border:1px solid @color;
        &:hover {
            background-color: lighten(@color, 20%);
        }
    }
}
div {
    button {
        #namespace.button(blue);        
        color: #namespace.button[background-color];
    }
}

🔸extend()繼承

繼承另外一個類的規則集，效果同混入，使用起來更優雅一點。

🔸使用：class :extend(pclass)

image.png

2.5、函數

內置了很多函數，用於字元、顏色、算數技術。函數手冊

屬性 描述
percentage(n) 轉換為百分比值，
saturate(color, 5%) 顏色飽和度增加5%
lighten(color, 5%) 顏色亮度降低5%
darken(color, 5%) 顏色亮度增加5%
if(condition, tv,fv) IF函數，同JS的三元運算符?
replace(str, par, rep) 字元替換
extract(list, index) 提取集合的值
each(list, rules) 循環輸出規則

03、Sass/Scss

中文文檔：//www.sass.hk/docs/

Less、Scss使用區別並不大，很多用法都比較相似，比較常用的嵌套是一樣的，變數、混入的語法稍有不同。相對而言，Less稍簡潔，Scss更強大點，學習一個就行了，很多框架是都支援，實際需要的時候看看文檔即可。

©️版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請註明出處！原文編輯地址-語雀

Tags:

VirMach 便宜 VPS

QNews

QNews