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