CSS预处理器SASS用法介绍

2021年3月11日16:51:25 发表评论 893 次浏览

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