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';