9.19 Sass
官网地址：https://www.sass.hk/
中文文档地址：https://www.sass.hk/docs/
说明：世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
Sass，less，stylus [ˈstaɪləs]，他们在本质上都是一样的,都是预编译语言,编译成了css
css中的问题
择器层数太多，中间使用很多个空格叠加，需要把前面的父元素写完整，否则优先级不够
sass是什么
sass写出来的代码跟css差不多，但是不是css，浏览器对于样式只能识别css，其他的都是不行的，sass可以加快我们css的编码速度，但是刚开始学习会觉得麻烦；
怎么使用sass
1.安装插件
通过vscode打开项目，并且安装插件
![[1280X1280 (16).PNG]]
本质上来说实现sass并不是依赖于插件，点击进入到sass的安装中会发现，安装非常麻烦，需要安装各种各样的东西，必须项ruby等
![[1280X1280 (17).PNG]]
2.注意：开始编辑安装md文档
安装插件 live sass complier
![[8c836f45-053c-4795-81f6-2a61281feaaf.png]]
安装插件后，在.scss(.sass)文件中，独步的状态栏上会有一个选项。
![[8363937e-72ec-4753-a49d-1f3b3e9ce243.png]]
注意，得先创建scss文件才会出现这个选项，创建style.scss文件
这时候会发现文件的后缀名是scss而不是sass，这个先不管，后面咱们再说区别
![[da5ea961-db79-40bf-9f22-cb1253bc1eb3.png]]
3.现在已经开始监听了,但是如果里面没有代码，则会显示以下信息
有代码之后，就会显示以下信息
![[83196a26-f6ba-4f43-beb9-7539e48f1b73.png]]
![[8b201ecc-3143-4cff-87e8-f8bbb3f160a9.png]]
![[59a4408f-402b-46a7-8ac0-e22f66aae091.png]]
Generated 产生，产生什么东西呢？一个style.css.map文件和style.css文件
- 添加更多sass代码
查看scss和css没什么太大的差别，就是简单的复制粘贴，我们再写点东西
div{color: red;p{font-size: 12px;}
}
兄弟选择器和父子关系选择器
div{color:red;p {font-size:12px;}span{font-size:12px;}
}
注意：最早的文件格式为 .sass，但是这种格式对css用户不够友好；并且新的特新支持不够好，所以sass官方也不推荐使用该格式，推荐使用.scss格式 这种格式对css格式进行了精简，不能写大括号和分号；选择器和属性纯靠锁进实现，容易出错，并且刚开始使用，不便于使用 一般使用sass我们会使用.scss作为我们的文件格式
5.修改生成文件的路径
默认情况下，生成的css文件，会出现在当前sass所在的目录，需要配置
配置流程
插件的配置肯定要找到这个插件 插件 - 车轮 - 扩展设置 - Formats
![[bd76fc77-c472-40bc-b05e-d27c67858876.png]]
点击进去之后，需要使用json格式配置，但是我们也不知道格式； 可以查看手册
查看配置格式
点击标题 - setting设置 -
![[7892af9d-37d4-4478-9559-4660c8d62506.png]]
![[48c39a41-909f-4ce8-b934-9905da5e9855.png]]
点击进去之后是个github的地址，第一个模块就是了
![[a41d13f7-0868-46d0-b57f-b6bb951133b2.png]]
里面可以设置这么多信息，但是我们常用的就2个，不知道格式怎么写，可以打开Examples 打开设置后，选择 formats，window会自动生成一套配置，没有生成的直接去github上复制就可以了
| format | 输出css中的格式, |
| extensionName | 输出的后缀名 |
| savePath | 保存路径（导出的css文件路径，这个路径从项目根目录开始），如果要单词生成css文件夹 ‘./css |
| savePathSegmentKeys | null |
| savePathReplaceSegmentsWith | null |
“extensionName”: 现在不太能理解，后面讲小程序，小程序中生成的css后缀名为wxss，所以这样可以用来控制格式
“savePath”: 我们现在打开的是sass，这时候的./就是sass，那么./css/表示的是对应的css文件夹
所以：我们只需要更改savaPath的值就可以了
"liveSassCompile.settings.formats": [{// compressed 压缩格式// 嵌套格式 展开格式// compact 紧凑格式// nested 嵌套格式"format": "expanded","extensionName": ".css","savePath": "~./css/" //编译后的文件生成路径 "./css/"}
]
6.生成的map文件是干什么用的
map：地图；map是用来做映射的
浏览器中加载的是scss，scss是源文件，但是我们真正使用的是css文件；
如果我们要修改颜色，显示是在style.scss的第4行；
那我们直接找到文件对应的第四行修改就可以了
嵌套语法结构
sass语法特点
-
完全兼容 CSS3
-
在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
-
通过函数进行颜色值与属性值的运算
-
提供控制指令 (control directives)等高级功能
-
自定义输出格式
sass中的注释
sass中支持单行注释： // 也支持多行注释：/**/
嵌套
1.基础语法格式
div{样式属性：属性值；P{样式属性：属性值；Span{样式属性：属性值；}}
}
注意：这种嵌套形式很容易让我们陷进去，会导致选择器的多层嵌套，如果选择器越多，则性能越差
2.子代，兄弟各种选择器的写法
div{// div的子代子代选择器{}// div的兄弟兄弟选择器 {}
}
（2）加：hover（类似的相同)
3.& 选择器本身 如果想要在这添加一个hover状态，怎么添加 正常情况下 div:hover 和 div :hover 一样么？ ！！！不一样的！！！
div{// &表示divp{// &表示div p}
}
-
@at-root给选择器添加动画
需求给p标签下的span添加文本颜色的过渡 现在添加动画直接在对应的标签下面写就可以了，之前还需要在前面添加@at-root 过渡效果是可以实现的，但是，会发现生成的css中会有一个带有-webkit-前缀的 -
属性嵌套
除了选择器嵌套，还有一个东西叫做属性嵌套 属性嵌套相对来说，并不是太好用； 咱们又很多符合属性：font，margin，padding，border等等都属于复合属性
![[3ed7467d-3513-4512-a4d4-cccd9a69d873.png]]
![[2c6ea2f7-14f0-4982-9282-33409c32d2b0.png]]
这个叫做属性嵌套，看完之后大家可能觉得还不如自己写css呢，大家可以慢慢用上这些东西，慢慢用着用着就会觉得很方便，很顺手； 等到你熟练之后，明显感觉使用sass你的速度会快很多； 将来工作中很可能会用这个东西，但是你用或者不用，不会影响咱们的页面布局，只是会让你做一种样式的选择，推荐大家以后的项目都适用sass来写样式
变量的定义
语法： $变量名：变量值
变量以美元符号开头，赋值方法与css属性的写法一样
格式： 必须以$开头 后面可以使用数字字母下划线，中划线
至于前面那个美元”$”符号，它其实是一个标识，告诉Sass, 这是一个外号，并不是一个真SB。 使用场景：整体页面的色系为红色
// 主题颜色
$color:#f00;
// 主体大小
$fsize:16px;
div{width: 600px;height: 200px;margin: 0 auto;background-color:
$color;font-size: $
fsize;
}
![[3234f509-d693-451b-82f3-a27e5861e7fd.png]]
变量的作用域
sass中的变量支持会计作用域，嵌套规则内定义的变量只能在嵌套规则中使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量专为全局变量可以添加!global声明 !global：把局部变量变成全局，但是感觉很少能用得到，既然这么多选择器要使用，直接定义成全局不是更方便么？
$color: orange;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.div {color: $color;//调用全局变量
}
.box {$color: red;//定义局部变量$size:16px !global; // 将局部变量 变成 全局a {color: $color;//调用局部变量}
}
span {color: $color;//调用全局变量font-size: $size;
}
什么时候使用变量？
-
该值至少重复出现了两次；
-
该值至少可能会被更新一次；
-
该值所有的表现都与变量有关（非巧合）。
基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。
sass数据类型（数字，字符串，颜色，布尔值，数组-list，maps-object）
1.sassScript数据类型
SassScript 支持 6 种主要的数据类型： 数字，1, 2.3, 13, 10px, 5a 字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false 空值，null 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
判断数据类型的方式：type-of($value)
2.数字类型
在sass中，10，12.5，24px这些都是数字类型 sassScript支持两种数字类型：带单位数字和不带单位数字（可正可负可零可浮点型） 只要是以数字开头的都是数字类型 注意：单位会和数组当做一个整体，进行运算 有单位的：width，height 无单位的：透明度0.5
$num :25px;
.box {width: $num * 6;height: $num * 4 - 10px;background-color: #f00;padding: $num + 2px;font-size: $num - 4;// font-size: $num - 1em; 25px and 1em have incompatible units. [25px和1em的单位不兼容]
}
原来在css中想要运算，需要使用calc函数
3.字符串
sass的字符串有两种类型： 有引号字符串：路径地址 - http://sass-lang.com 无引号字符串: 颜色 - red
$color:'red';
$color1:red;
$url:'http://www.yhit.org/content/themes/yhit/resource/index/images/index/hj1.jpg';
div{width: 300px;height: 300px;font-size: 30px;background-image: url($url);// color: $color1; // 颜色值不能带字符串color: #{$color};// 非要使用$color,可以添加#{},有引号字符串将被编译为无引号字符串
}
4.颜色运算
注意事项： 两个十六进制的颜色值，进行运算的时候，会分为rgb三个色段分别进行运算 颜色值也可以进行乘法运算 rgba的颜色运算，后面的透明度要保持一致，否则会报错
// 案例一：颜色值相加
color: #010203 + #040506;
返回值为：color: #050709;// 案例二：乘法运算
color: #010203 * 2;
返回值：color: #020406;// 案例三：透明度保持一直
如果颜色值包含alpha channel（rgba或hsla两种颜色值），必须拥有相等的alpha 值才能进行运算，因为算数运算不会作用于alpha值
color: rgba(255,0,0,0.55) + rgba(255,255,0,0.35);// 正常使用：
color: rgba(255,0,0,0.55) + rgba(0,255,0,0.55);
结果为：color: rgba(255, 255, 0, 0.55);// 案例四：定义变量颜色，并对颜色进行计算【不能使用】
$color:#04a3f9;
div{width: 300px;height: 300px;font-size: 30px;background-color: $color + 1;
}
循环（for，each，while）【重要】
for循环
在Sass中，可以使用“@for”来实现循环操作。其中有2种方式。 @for $i from 开始值 through 结束值 @for $i from 开始值 to 结束值 这2种方式是相似的，唯一的区别是：方式1包括结束值，方式2不包括结束值。其中“开始值”和“结束值”都是正整数。 思考循环：从几开始循环，循环到几，中间间隔（不需要管，人家定义好了） 案例一：使用from - through循环
@for
$i from 1 through 3{.width#{$i} {width: $i * 10px;}
}
上述代码中，循环一共循环了三次，从 $i 的值为 1 开始循环，一直到 3 结束，并且包括了 3。
案例二：使用for-to循环
@for
$i from 1 to 3{.width#{$i} {width: $i * 10px;}
}
和 through 关键字不同，to 关键字的循环虽然也是从 $i 的值为 1 开始循环，但是不包括 3 ，所以整个循环只循环两遍。
@while指令
@while 指令也可以用于循环样式，后面接 SassScript 表达式，循环会一直到表达式的值为 false 时停止。
语法结构： @while 表达式{ 循环的内容 }
注意：表达式不需要添加（）;循环的内容中需要添加更新循环变量 简单while案例：循环输出 1-5
$num: 1;
@while
$num < 5 {.box{ font-size: #{$num}px;}$num: $
num + 1;
}
案例一：给第一个li设置字体12，第二个设置为14，第三个设置为16
$num: 12;
@while
$num < 18 {.f-#{$num} {font-size: #{$num}px; }$num: $num + 2;
}
变量 $num 的初始值为 12，首先会输出 font-size:12px 样式，然后每次循环都会在原有的基础上加 2，一直到 不满足 $num < 18 这个条件，则循环会停止执行。
@each 指令
@each 指令可以用于遍历一个列表，然后从列表中取出对应的值。
语法格式：@each $i in <list>
$i 就是一个变量名，<list> 是一个 SassScript 表达式，返回一个列表值。
$list: 5 10 15 20 25;
@each $i in $list {.p-#{$i}{padding: #{$i}px;}
}
可以看到上述代码中，我们遍历了定义好的 $list 中的5个值，一直到列表中的值遍历完后，循环才会停止。 一般情况下each会用来遍历列表中的内容；（有点类似于for-in遍历，遍历完内容之后自动停止）
if判断-三元运算
if判断
@if可一个条件单独使用，也可以和@else结合多条件使用 if的条件必须是一个boolean类型；并且这里不会自动进行数字类型转换； 所以只有true的情况才能执行if的内容
语法：@if 表达式{ 表达式为true，执行代码 }
案例：if判断基础案例
$bool:true;
header{color:green;@if $true{color: yellow;}
}
案例：if-else基础案例
$type:five;
header{@if $type==one{color: red;}@else if $type==two{color:blue;}@else if $type==three{color:green;}@else {color: pink;}
}
案例：鼠标悬浮改变颜色
$$bool:true;header{color:green;&:hover{@if $$bool{color: yellow;}@else{color:red;}}
}
案例：给所有的偶数行添加背景颜色
@for $i from 1 through 10{@if $i % 2 == 0{.box:nth-child(#{$i}){color:red;}}
}
注意：必须使用 through，否则不包含10这个数字；头不包含结束的数字
三元运算符
语法：if($condition, $if_true, $if_false)
在三元运算符中，是可以添加()括号的；
$true:true;
$color:false;
header{font-size: if($true,5px,10px);
}
footer{color: if($color,red,blue);
}
函数指令（function）
定义函数
@function grid-width($n,$m) {@return $n + $m;
}
#sidebar { width: grid-width(5,3); }
更多详细信息，查看sass官网：https://www.sassmeister.com/