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

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