技術標籤：Scsssass

2020.12.24 15:56

文章目錄

• • 01.混合指令
  • 02.函式指令----內建函式
  • 03.函式指令----自定義函式

01.混合指令

混合指令（Mixin）用於定義可重複使用的樣式，避免了使用無語意的 class，比如 .float-left。混合指令可以包含所有的 CSS
規則，絕大部分 Sass 規則，甚至通過引數功能引入變數，輸出多樣化的樣式。

注意：這不是函式！沒有返回值！！

1.定義混合指令

混合指令的用法是在 @mixin 後新增名稱與樣式，以及需要的引數（可選）。

/*格式：*/
@mixin name {
    樣式....
}

@mixin
 
 color {
    font{
        size: 15px;
        font-weight: bold;
    }
    color: black;
}

2.引用混合樣式
使用 @include 指令引用混合樣式，格式是在其後新增混合名稱，以及需要的引數（可選）。

格式：
@include name;

注：無引數或引數都有預設值時，帶不帶括號都可以*/

3.引數

格式：按照變數的格式，通過逗號分隔，將引數寫進Mixin名稱後的圓括號裡

支援預設值；支援多引數；支援不定引數；支援位置傳參和關鍵詞傳參

a. 位置傳參

@mixin mp($width) {
    margin
 
: $width;
}

body {
    @include mp(300px);
}

b.關鍵詞傳參

@mixin mp($width) {
    margin: $width;
}

body {
    @include mp($width: 300px);
}

c.引數預設值

@mixin mp($width: 500px) {
    margin: $width;
}

body {
    @include mp($width: 300px);
    // or
    @include mp(300px);
}

和函式引數預設值類似，傳引數就用傳的，不傳就用預設的

d.不定引數

官方：Variable Arguments

譯文：引數變數
有時，不能確定混合指令需要使用多少個引數。這時，可以使用引數變數 … 宣告（寫在引數的最後方）告訴 Sass 將這些引數視為值列表處理

@mixin mar($value...) {
    margin: $value;
}

4.向混合樣式中匯入內容

在引用混合樣式的時候，可以先將一段程式碼匯入到混合指令中，然後再輸出混合樣式，額外匯入的部分將出現在 @content 標誌的地方

可以看作引數的升級版

@mixin example {
    html {
        @content;
    }
}
@include example{
    background-color: red;
    .logo {
        width: 600px;
    }
}

// compile:
html {
  background-color: red;
}

html .logo {
  width: 600px;
}

02.函式指令----內建函式

a. 字串函式

b. 數字函式

c. 陣列函式

d. 對映函式

e. Introspection函式

f. 顏色函式

HSL函式

Opacity函式

03.函式指令----自定義函式

Sass 支援自定義函式，並能在任何屬性值或 Sass script 中使用
Params: 與Mixin一致
支援返回值

基本格式：

@function fn-name($params...) {
    @return $params;
}

// example:
@function fn-name($params...) {
    @return nth($params, 1);
}
p {
    height: fn-name(1px);
}

// compiled:
p {
  height: 1px;
}