Sass-5【颜色函数、透明度函数、@规则】

一.颜色函数

(1).rgb函数

div{
    width:300px;
    height:300px;
    background-color:rgba(200,100,50);
}

(2).red/blue/green

red(#c86432) 200

(3).mix混合函数

div{
    width:300px;
    height:300px;
    background-color:mix(red,blue)
}
//编译结果
div{
    width:300px;
    height:300px;
    background-color:purple;
}

设置比例

div{
    width:300px;
    height:300px;
    background-color:mix(red,blue,25%);
}

代表红色百分之25 蓝色百分之75

(4).hsl色彩空间

更加直观的表单颜色

H 色相  S饱和度 L亮度

Hue值:圆环上的度数  0-360

Sataration值:高中轴的距离 0-100%

Lightness值:颜色的高度 0-100%

div{
    width:300px;
    height:300px;
    background-color:hsl(100deg,20%,80%);
}
background-color:#c9d6c2

hue/saturation/lightness也可以是函数

hue(#c9d6c2)
99deg
saturation(#c9d6c2)
19.60....

更多函数可以查阅百度

二.透明度函数

(1).rgba函数

div{
    width:300px;
    height:300px;
    background-color:rgba(200,100,20,.5);
}

(2).hsl透明度

div{
    width:300px;
    height:300px;
    background-color:hsla(100,20%,80%,.5)
}

(3).opacity函数

alpha(rgba(red,.8)) 0.8

三.@规则

(1).@import

导入别的文件样式

@import 'style.scss';

sass也会自动找具有.scss和sass扩展名的同名文件

可以不写后缀名

文件名称前面加上_即可不编译为css，里面可以专门写变量等，因为就算编译出来内容也是空的

(2).@media媒体查询

body{
    background-color:orange;
    @media screen and （max-width:1000px){
        background-color:blue;
    }
}

@media screen{
    body{
        @media(max-width:1000px){
            background-color:blue;
        }
    }
}

(3).@extend

继承

(4).@at-root

跳出根选择器

.a{
    color:red;
    .b{
        color:green;
    }
    .c{
        color:blue;
    }
    @at-root .d{
        color:pink;
    }
}
//编译后结果
.a{
    color:red;
}
.a .b{
    color:green;
}
.a .c{
    color:pink;
}
.d{
    color:pink;
}

(5).@debug

提示报错

@debug ‘There is a bug in your program’;

.box{
    width:10px +10em;
}

(6).@error

同上

(7).@warn

同上