sass進階-(函數與調試)

內置函數

• rgb()和rgba()

#color : red;
    body{
        color : rgb(255,255,255);
        background-color : rgba($color,$alpha);
        /*也可以這麼寫 rgba(255,0,0,0.5);*/
    }
    /*編譯之後*/
    body{
        color : white;
    }

• darken 加深 和 lighten 變淺

    p{
        color : darken($color,2);
        background-color : lighten(#color,1);
    }

-str-length() 和 str-index()

    p{
        z-index : str-length('hongtao');
        z-index : str-index('hong','g');
        /*索引是從1開始的*/
        /*編譯之後*/
        z-index : 7;
        z-index : 4;
    }

自定義函數

@function double($width){
        @return width * 2；
}

@debug @warn @error

    @debug 'This is adebug';
    /*控制檯環境下面才能看到*/
    @warn  'Warn';
    @error 'Error';