这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
重点内容
在本次笔记，我们主要关注的内容包括：sass的基础使用
知识点介绍
什么是sass
Sass就CSS预处理器中的一种。CSS 预处理器定义了一种新的语言，让我们可以像操作JavaScript那样以“编程”的方式来书写CSS。 Sass就是功能最为强大、最成熟、并且是最为流行的CSS预处理器。
安装
cmd打开本地命令控制窗口，输入下面字符串回车。
npm install -g sass
基本语法
变量
在Sass中，我们声明变量使用的是“$”（美元符号）开头。
Sass的变量包括3部分：声明符、变量名、值。
如：$default-color: rgb(223, 148, 148);
可以直接引用或进行嵌套使用
//直接引用
h1{
color: $default-color；
}
//嵌套使用
$normal-color:$default-color;
数据类型
Sass中，共有7种数据类型：
- 数字值；
- 字符串；
- 布尔值；
- 颜色值；
- 列表值；
- Map值；
- 空值null；
嵌套
不同与css，Sass为我们提供了一种方便的操作方式：嵌套。在Sass中，共有3种嵌套方式：
- （1）选择器嵌套；
- （2）属性嵌套；
- （3）伪类嵌套； 如
div{
height: 100px;
border: 1px solid red {
left: 0;
top: 0;
}
ul{
height: 80px;
li{
height: 50px;
&:hover {
color: #000;
}
}
}
}
相当于：
div {
height: 100px;
border: 1px solid red;
border-left: 0;
border-top: 0;
}
div ul {
height: 80px;
}
div ul li {
height: 50px;
}
div ul li:hover {
color: #000;
}
Interpolation
把一个值插入到另一个值，具体用法如下 #{变量} 如：
$default-color: color;
body{
#{$default-color}:red;
}
相当于：
body {
color: red;
}
基本运算
计算功能（SASS允许在代码中使用算式）
如：
$val: 20px;
body{
margin: (10px*2);
left: 20px + $val;
}
相当于：
body {
margin: 20px;
left: 40px;
}
字符运算
在Sass中，我们可以使用“+”（加号）来实现字符串的拼接。其中，结果字符串是否有引号，取决于左边字符串是否有引号。
颜色运算
SASS提供了一些内置的颜色函数，以便生成系列颜色。 hsl（色相，饱和度，明度，不透明度）;
body{
background-color: hsl(5, 20%, 20%,0.5);
}
相当于：
body {
background-color: rgba(61, 43, 41, 0.5);
}
在Sass中，我们可以对颜色值进行运算。如果颜色值不是十六进制颜色值（如#010203），将RGB或HSL先转换为十六进制颜色值，然后再进行运算.
流程控制
Sass作为一门编程式的语言，也有属于自己的一套流程控制语法。
- （1）@if语句；
- （2）@for循环；
- （3）@while循环；
- （4）@each循环；
一、@if语句
在Sass中，我们可以使用“@if语句”来进行条件选择判断。
二、@for循环
在Sass中，我们可以使用“@for”来实现循环操作。
语法：
@for $i from 开始值 through 结束值;
@for $i from 开始值 to 结束值;
这2种方式是相似的，唯一的区别是：方式1包括结束值，方式2不包括结束值。其中“开始值”和“结束值”都是正整数。
三、@while循环
在Sass中，我们可以使用@while语句来实现循环操作。
语法：
@while(判断条件){ 执行语句;}
四、@each循环
Sass中的each循环跟jQuery中的each循环很相似
语法：
@each $var in 列表值{……}
