SASS学习笔记

1、定义变量：

使用$定义变量，可以在之后的选择器样式中进行复用：

$exam: rgb(111,222,123)

//复用
.box {
    color: $exam
}

//也可以在一个变量中使用另一个变量：
$exam2: 1px solid $exam
.box2 {
    border: $exam2
}

2、嵌套选择器：

父选择器里面可以直接写子选择器

.grandfather {
    width: 100%;
    height: 100%;
    .father {
		display: flex;
        .son {
			font-size: 10px；
            //如果需要表示伪类，则使用&表示当前元素，如：
            &hover: {
				font-size: 15px
            } 
        }
    }
}

在SASS中，属性也可以嵌套使用：

.exam {
    border: 1px solid red {
        left: 0;
        top: 0
        }
}

3、mixin混合：

即将需要多次使用的样式组合写在mixin混合中，用法为：

//使用@mixin声明
@mixin 名字 (参数1，参数2){
	...样式
}
//参数可使用可不用，使用参数可以根据实际需求在使用混合时灵猴更换

4、样式继承：

使用@extend来继承某个选择器中的全部样式

.exam {
	font-size:10px
}
.exam2 {
	@extend: .exam
}

5、计算功能：

在sass中允许在样式中进行计算：

$a: 10px
.exam {
	font-size: $a + 10px
}

6、if判断与for循环：

跟js一样，sass允许使用@if与@for执行判断与循环语句，用法如下：

//if语句
@if 2 > 3 {
    font-size: 10px
}
@else {
	font-size: 15px
}
//for循环
//结束值不执行
@for 变量 from 开始值 through 结束值 {
	...
}
//结束值也执行
@for 变量 from 开始值 to 结束值 {
}

除此之外，sass还支持列表循环、while循环以及自定义函数等功能，感兴趣可以自行了解。