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

2021-08-30 18:35:10 阅读：187 来源： 互联网

标签：sass color 汇总用到 transition 混合器数值 100px type

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);
}

标签：sass,color,汇总,用到,transition,混合器,数值,100px,type
来源： https://www.cnblogs.com/ypSharing/p/sassNode.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9