Sass預處理器常見函數的基本使用

-Advertisement-

Sass提供了許多內置模塊，其中包含有用的函數（以及mixin）。這些模塊可以像任何用戶定義的樣式表一樣使用@use規則載入，它們的函數可以像任何其他模塊成員一樣調用。所有內置模塊URL都以sass開頭：表示它們是sass本身的一部分。常見函數簡介，更多函數列表可看：https://sass-la ...

Sass提供了許多內置模塊，其中包含有用的函數（以及mixin）。這些模塊可以像任何用戶定義的樣式表一樣使用@use規則載入，它們的函數可以像任何其他模塊成員一樣調用。所有內置模塊URL都以sass開頭：表示它們是sass本身的一部分。

常見函數簡介，更多函數列表可看：https://sass-lang.com/documentation/modules

Color(顏色函數)

sass包含很多操作顏色的函數。例如：lighten() 與 darken()函數可用於調亮或調暗顏色，opacify()函數使顏色透明度減少，transparent()函數使顏色透明度增加，mix()函數可用來混合兩種顏色。

p {
    height: 30px;
}

.p0 {
    background-color: #5c7a29;
}

.p1 {
    /* 
        讓顏色變亮
        lighten($color, $amount)
        $amount 的取值在0% - 100% 之間
     */
    background-color: lighten(#5c7a29, 30%);
}

.p2 {
    // 讓顏色變暗  通常使用color.scale()代替該方案
    background-color: darken(#5c7a29, 15%);
}

.p3 {
    // 降低顏色透明度  通常使用color.scale()代替該方案
    // background-color: opacify(#5c7a29,0.5);
    background-color: opacify(rgba(#5c7a29, 0.1), 0.5);
}

使用

<p></p>
<p class="p0"></p>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>

String（字元串函數）

Sass有許多處理字元串的函數，比如向字元串添加引號的quote()、獲取字元串長度的string-length()和將內容插入字元串給定位置的string-insert()。

例

p {
    &:after {
        content: quote(這是裡面的內容);
    }
    background-color: unquote($string: "#F00");
    z-index:str-length("sass學習");
}

Math(數值函數)

數值函數處理數值計算，例如：percentage()將無單元的數值轉換為百分比，round()將數字四捨五入為最接近的整數，min()和max()獲取幾個數字中的最小值或最大值，random()返回一個隨機數。

例如

p {
    z-index: abs($number: -15); // 15
    z-index: ceil(5.8); //6
    z-index: max(5, 1, 6, 8, 3); //8
    opacity: random(); // 隨機 0-1
}

更多詳細使用：https://sass-lang.com/documentation/modules/math

List函數

List函數操作List，length()返回列表長度，nth()返回列表中的特定項，join()將兩個列表連接在一起，append()在列表末尾添加一個值。

例如：

p {
    z-index: length(12px); //1
    z-index: length(12px 5px 8px); //3
    z-index: index(a b c d, c); //3
    padding: append(10px 20px, 30px); // 10px 20px 30px
    color: nth($list: red blue green, $n: 2); // blue
}

更多詳細使用：https://sass-lang.com/documentation/modules/list

Map函數

Map函數操作Map，map-get()根據鍵值獲取map中的對應值，map-merge()來將兩個map合併成一個新的map，map-values()映射中的所有值。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
$padding:(top:10px, right:20px, bottom:10px, left:30px);
p {
    font-size: map-get($font-sizes, "normal"); //18px
    @if map-has-key($padding, "right") {
        padding-right: map-get($padding, "right");
    }
    &:after {
        content: map-keys($font-sizes) + " "+ map-values($padding) + "";
    }
}

更多詳細使用：https://sass-lang.com/documentation/modules/map

selector選擇器函數

選擇符相關函數可對CSS選擇進行一些相應的操作，例如：selector-append()可以把一個選擇符附加到另一個選擇符，selector-unify()將兩組選擇器合成一個複合選擇器。

例如

.header {
    background-color: #000;
    content: selector-append(".a", ".b", ".c") + '';
    content: selector-unify("a", ".disabled") + '';
}

自檢函數

自檢相關函數，例如：feature-exists()檢查當前Sass版本是否存在某個特性，variable-exists()檢查當前作用域中是否存在某個變數，mixin-exists()檢查某個mixin是否存在。

例如：

$color:#F00;
@mixin padding($left:0, $top:0, $right:0, $bottom:0) {
    padding: $top $right $bottom $left;
}

.container {
    @if variable-exists(color) {
        color: $color;
    }
    @else {
        content: "$color不存在";
    }
    @if mixin-exists(padding) {
        @include padding($left: 10px, $right: 10px);
    }
}

自檢函數通常用在代碼的調試上

常見的內置函數就這些，如果這些不能滿足你的要求，你也可以自定義函數功能，後面的課程我們會單獨講解，更多課程關註“老姚實戰營”。

您的分享是我們最大的動力!