CSS预处理器SASS用法介绍

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

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

编译完CSS代码后, 将其保存为

style.css

CSS预处理器|SASS2

嵌套:

SASS允许CSS规则相互嵌套, 这些规则遵循HTML的相同视觉层次。例如:CSS属性可用于div标签内嵌套的<li>标签。

CSS预处理器|SASS3

编译完CSS代码后, 将其保存为

style.css

CSS预处理器|SASS4

输出如下:

CSS预处理器|SASS5

Mixins:

Mixins有助于使一组CSS属性可重用, 即保存一个代码并一次又一次地使用它。可以通过使用将其包含在其他CSS规则中

@包括

指示。

例子:

CSS预处理器|SASS6

编译后的CSS代码变为:

CSS预处理器|SASS7

网页的输出:

CSS预处理器|SASS8

例子:

Mixins也可以将变量作为参数。在将它们包含在CSS规则中的同时传递值。

CSS预处理器|SASS9

编译后的CSS代码:

CSS预处理器|SASS10

最终输出:

CSS预处理器|SASS11

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: