CSS预处理器SASS用法介绍 _SASS

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 = "https://www.lsbin.com/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