Sass前處理器 常見函式的基本使用

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 ></p>
<p ></p>
<p ></p>
<p ></p>

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

String（字串函式）

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

例

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

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

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") + '';
}

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

自檢函式

? 自檢相關函式，例如：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);
    }
}

自檢函式通常用在代碼的除錯上

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

標籤：其他

上一篇：不容錯過！什么是領域驅動設計？為什么落地這么難？

下一篇：Object.assign實作的是淺拷貝還是深拷貝？