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