项目中经常用到的sass语法汇总

Posted 2021-08-30 大鹏_yp

1、定义变量

使用：$（符号定义变量）
注意：使用时要带有‘$’符号，定义变量的方式与php相同
$变量：数值;

$color_r : red;
div{
    color:$color_r;
}

2、if判断语句

执行逻辑与js中的if判断完全相同
使用：@if、 @else if、@else
注意：判断条件没有（）直接写就行

2-1 @if 变量 判断符号 数值 { 样式 }

$c1 : red;
$c2 : blue;
$c3 : pink;
$c4 : green;
$res:z;

div{
    width: 100px;
    height: 100px;
    @if $res == a { 
        color: $c1;
    } 
}

2-2 @if 变量 判断符号 数值 { 样式1 } @else { 样式2 }

div{
    width: 100px;
    height: 100px;
    @if $res == a { 
        color: $c1;
    } @else{
        color: $c2;
    }
}

2-3 @else if 变量 判断符号 数值 { 样式2 }

@if 变量 判断符号 数值 { 样式1 }    
@else if  变量 判断符号 数值 { 样式2 }    
@else if 变量 判断符号 数值 { 样式3 }   
@else { 样式4 }  

div{
    width: 100px;
    height: 100px;
    @if $res == a { 
        color: $c1;
    } @else if $res == b{
        color: $c2;
    } @else if $res == c{
        color: $c3;
    } @else{
        color: $c4;
    }
}

3、循环语句

注意：关键词前，添加@符号，没有（）

for循环

3-1 @for 变量 from start数值 to end数值 {代码}

解释：从‘start数值’开始循环，‘end数值’结束循环，但不包括‘end数值’
例如：@for $i from 1 to 3{代码}
循环是 $i=1 和$i=2 的两次循环，没有3

@for $i from 1 to 6 {
    li:nth-child( #{$i} ){
        color: red;
        border: 1px*$i solid #000;
    }
}

3-2 @for 变量 from start数值 through end数值 {代码}

解释：从‘start数值’开始，中止数值是‘end数值’，并且包括‘end数值’
例如：@for $i from 1 throught 3
循环是 $i=1 和 $i=2 和 $i=3 的3次循环

@for $i from 1 through 5 {
    li:nth-child( #{$i} ){
        color: red;
        border: 1px*$i solid #000;
    }
}

each循环

循环数值的语法
sass中定义数组：$变量:(1,数值1),(2,数值2),(3,数值3)...
注意：sass中定义数组，数值索引下标从1开始

each语句

@each $变量1 ,$变量2 in $ 数值变量 {执行程序}
$变量1: 存储数组的索引
$变量2: 存储数值的数据

$arr : (1,red),(2,blue),(3,pink),(4,orange),(5,green);

@each $index , $value in $arr {
    li:nth-child(#{$index}){
        color: $value;
    }
}

4、结构嵌套

父子 ,后代 关系
父子后代关系
之前的css,是 父级, 子级分开定义
现在是 在 父级中 嵌套定义子级属性
还可以嵌套定义父级的伪类选择器

父级{
css属性:属性值
> 子级{ 父子
子级css属性:属性值
}
子级{ 后代
子级css属性:属性值
}
&:hover{
伪类的属性:属性值
}
}

div{
    width:300px;
    height:300px;
    background:pink;

    // 直接在父级css中,定义子级样式
    // >span{
    //     color:red;
    // }
    
    // 直接在父级中,定义后代样式
    span{
        color: blue;
    }

    // 直接定义当前标签的伪类选择器
    &:hover{
        background: gray;
    }
}

5、属性嵌套

在当前属性值，设定特殊的属性值
例如：margin:四个方向属性都是100px {
需要单独设定 matgin-left：500px;};

div{
    width: 100px;
    height: 100px;
    margin: 100px {
        top: 50px;
    };
    border: 1px solid red{
        top: 4px solid blue;
    };
}

6、混合器 -- 类似于js中的函数

使用场景:
一般设定兼容前缀时使用
一些多次重复使用的css样式
使用：混合器关键词 @mixin 混合器名称(){}
调用混合器：@include 混合器名称()

如果是知识纯粹的编译 sass 文件,混合器是原样执行
如果使用 gulp 打包压缩,因为 gulp 有添加前缀的 打包规范,会根据兼容浏览器版本不同,添加不同的兼容语法
打包之后的 css 兼容,可能与你写的css兼容不同

语法形式1 没有参数 也就是没有()

定义时： @mixin 混合器名称 {}
使用时： @include 混合器名称()

// 没有参数
@mixin t1{
    -webkit-transition:all 2s;
    -moz-transition:all 2s;
    -ms-transition:all 2s;
    -o-transition:all 2s;
    transition:all 2s;
}
h1{
    @include t1();
}

语法形式2 有参数,但是参数没有默认值

定义时： @mixin 混合器名称($参数1,参数2) {}
使用时： @include 混合器名称(实参1,实参2)

// 有参数,没有默认值
@mixin t2($type,$time) {
    -webkit-transition:$type $time;
    -moz-transition:$type $time;
    -ms-transition:$type $time;
    -o-transition:$type $time;
    transition:$type $time; 
}
div{
    width: 100px;
    height: 100px;

    // 调用混合器
    // @include t1();

    // 调用混合器,输入实参
    @include t2( all , 3s );
}

p{
    @include t2( height , 10s );
}

语法形式3 有参数,有默认值

必须给所有的形参都赋值默认值
不能有的有默认值有的没有默认值
定义时： @mixin 混合器名称($参数1:默认值,参数2:默认值) {}
使用时: @include 混合器名称(实参1,实参2)

// 有参数,有默认值 
@mixin t3($type:all,$time:3s) {
    -webkit-transition:$type $time;
    -moz-transition:$type $time;
    -ms-transition:$type $time;
    -o-transition:$type $time;
    transition:$type $time; 
}
h1{
    @include t3();
}

h2{
    @include t3(font-size);
}

h3{
    @include t3(left);
}