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代码后, 将其保存为
style.css
嵌套:
SASS允许CSS规则相互嵌套, 这些规则遵循HTML的相同视觉层次。例如:CSS属性可用于div标签内嵌套的<li>标签。
编译完CSS代码后, 将其保存为
style.css
输出如下:
Mixins:
Mixins有助于使一组CSS属性可重用, 即保存一个代码并一次又一次地使用它。可以通过使用将其包含在其他CSS规则中
@包括
指示。
例子:
编译后的CSS代码变为:
网页的输出:
例子:
Mixins也可以将变量作为参数。在将它们包含在CSS规则中的同时传递值。
编译后的CSS代码:
最终输出: