2022-04-17 Sass学习笔记(二) Sass的语法:变量,条件分支,循环,mixin

1.变量

常见使用场景

把css文件中经常使用的颜色设置为一个变量,
当用户需要不同的主题时,只需要改变此变量的值即可,
而不是修改每一个css文件中涉及到背景色,字体颜色的代码行

语法

$variablename: value;

定义:$变量名:变量值

使用:元素属性名:$变量名

示例

index.scss

$color1:blue;
$color2:white;
$num:150px;
div {
    height: $num*2;width: $num*2;background-color: $color1;p {
    height: $num;width: $num;margin: 0 auto;background-color: $color2;border-radius: 50%;}
}

生成的index.css

div {
    height: 300px;width: 300px;background-color: blue;
}div p {
    height: 150px;width: 150px;margin: 0 auto;background-color: white;border-radius: 50%;
}

2.条件分支

常见使用场景

语法

@if(判断语句){
    css代码1
}
@else{
    css代码2
}

示例

game.scss

$hand:"left";
@if($hand=="right") {
    #box {
    width: 100px;height: 100px;background-color: black;}
}@else {
    #box {
    width: 100px;height: 100px;background-color: red;}
}

game.css

#box {
    width: 100px;height: 100px;background-color: red;
}

3.循环

常见使用场景

子节点的元素样式的属性值呈规律性递增时使用循环

语法

1.@for 指令

@for 指令可以用于循环生成样式,有两种类型，如下所示：

第一种:使用关键字 to 不会包括 end 这个数

@for $变量名 from <起始值> to <结束值>

第二种:使用关键字 through 时会包括 end 这个数

@for $变量名 from <起始值> through <结束值>

2.@each 指令

@each 指令可以用于遍历一个列表，然后从列表中取出对应的值

@each $变量名 in <数组>

示例一:for循环li节点的样式

box.scss

//css的循环是从1开始的,js的循环是从0开始的
@for $item from 1 to 6 {
    li:nth-child(#{$item}) { // 注意此处选择器的格式:"#"号表示{}里面是js语法width: 100px;height: 100px;background: pink;position: absolute;top: ($item - 1)*100px;left: ($item - 1)*100px;// top: $item*100px;// left: $item*100px;}
}

生成box.css

li:nth-child(1) {
    
...top: 0px;left: 0px;
}...li:nth-child(5) {
    
...top: 400px;left: 400px;
}

示例二:each…in节点的样式

scss文件:

$col:red blue green;//颜色列表
@each $item in $col {
    $index: index($col, $item);//此处调用了系统的索引函数index(list,item)li:nth-child(#{$index}) {
    background: $item;}
}

css文件:

li:nth-child(1) {
    background: red;
}
li:nth-child(2) {
    background: blue;
}
li:nth-child(3) {
    background: green;
}

4.混合(Mixin)

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

语法

定义一个混入

@mixin mixin-name{
    css样式
}

使用混入

selector {
    @include mixin-name;
}

示例

scss:

@mixin liStyle {
    //设置width: 150px;height: 150px;
}li:nth-child(1) {
    @include liStyle();//引入background: red;
}li:nth-child(2) {
    @include liStyle();background: blue;
}li:nth-child(3) {
    @include liStyle();background: green;
}

css:

li:nth-child(1) {
    width: 150px;height: 150px;background: red;
}li:nth-child(2) {
    width: 150px;height: 150px;background: blue;
}li:nth-child(3) {
    width: 150px;height: 150px;background: green;
}

5.知识点

5.1.索引函数$idx:index($list,$item)

5.2.css的循环是从1开始的

5.3.浏览器兼容性

-moz- 是火狐浏览器厂商前缀
-webkit- 是谷歌浏览器厂商前缀
-o- 是opera浏览器厂商前缀

5.4.html的p标签中不能再嵌套其他标签