SASS是"语法很棒的样式表"的缩写。它是具有语法改进功能的CSS预处理器。该程序将处理高级语法中的样式表, 并将其编译为常规CSS样式表, 可在网站中使用。它是一个CSS扩展, 允许使用兼容CSS语法的变量, 嵌套, 导入, 混合, 继承等功能。
注意:该链接描述了SASS的安装过程。参考:https://sass-lang.com/install
SASS有两种可用的语法:
- SCSS(Sassy CSS):使用此语法的文件使用.scss延期。
- 缩进语法(简称为" sass"):旧语法, 使用此语法的文件.sass延期。
注意:这个例子使用.scss延期。
工作步骤:
- 编写SCSS代码。
- 使用以下命令将SCSS代码编译为CSS代码sass input.scss输出.css。第一个文件名(input.scss)是要编译的scss文件, 第二个文件名(output.css)是要包含/附加在html文档中的已处理CSS文件。
- 在html文件中包含已编译的CSS文件。
现在, 了解如何有效利用SCSS的重要功能, 例如变量, 嵌套, mixin和运算符。
- 主HTML文件名为index.html
- SCSS文件是样式CSS文件是style.css
- 编译SCSS文件的命令:sass styling.scss style.css
例子:文档名称index.html
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title >SASS</ title >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div id = "d1" >Welcome to lsbin.
< ul >
< li >Algo</ li >
< li >DS</ li >
< li >Languages</ li >
< li >Interviews</ li >
< li >CS subjects</ li >
</ ul >
</ div >
</ body >
</ html >
变量:
变量可用于存储可重复使用的CSS值。要在SASS中声明变量, 请使用" $"字符。示例:$ v_name
![CSS预处理器|SASS1](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-14-22-41-00.png)
编译完CSS代码后, 将其保存为
style.css
![CSS预处理器|SASS2](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-14-23-02-45.png)
嵌套:
SASS允许CSS规则相互嵌套, 这些规则遵循HTML的相同视觉层次。例如:CSS属性可用于div标签内嵌套的<li>标签。
![CSS预处理器|SASS3](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-17-10-35-30.png)
编译完CSS代码后, 将其保存为
style.css
![CSS预处理器|SASS4](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-17-11-21-07.png)
输出如下:
![CSS预处理器|SASS5](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-17-11-24-35-1.png)
Mixins:
Mixins有助于使一组CSS属性可重用, 即保存一个代码并一次又一次地使用它。可以通过使用将其包含在其他CSS规则中
@包括
指示。
例子:
![CSS预处理器|SASS6](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-17-22-14-50.png)
编译后的CSS代码变为:
![CSS预处理器|SASS7](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-17-22-14-59.png)
网页的输出:
![CSS预处理器|SASS8](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-17-22-31-39.png)
例子:
Mixins也可以将变量作为参数。在将它们包含在CSS规则中的同时传递值。
![CSS预处理器|SASS9](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-17-22-40-01.png)
编译后的CSS代码:
![CSS预处理器|SASS10](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-17-22-40-21.png)
最终输出:
![CSS预处理器|SASS11](https://www.lsbin.com/wp-content/uploads/2021/03/Screenshot-from-2019-01-17-22-40-31.png)