Sass是一个CSS预处理器，完全兼容所有版本的CSS。事实上，Sass并没有真正为CSS语言添加任何新特性，但在很多情况下可以帮助我们减少CSS重复代码，节省开发时间。一起来看看Sass中常用的函数吧！1.CommentsSass中支持两种类型的注释：//Comment1/*Comment2*/需要注意的是，当Sass编译成CSS时，第一条注释不会被编译成CSS（只在Sass中可见文件），第二条评论将被编译成CSS。2.嵌套嵌套是Sass的一大特点。通过嵌套这些代码，可以得到类似于HTML结构的CSS代码，使代码更具可读性。导航{背景：#C39BD3;填充：10px；高度：50px；ul{显示：flex;列表样式：无；证明内容：flex-end；李{颜色：白色；右边距：10px；那么为什么要使用嵌套呢？在CSS中，如果要为其父元素的继承元素定义样式，则每次都必须选择父元素：html,body{height:100%;}html#root,body#root{height:100%;}html.div-with-button,body.div-with-button{background-color:black;}html.div-with-buttonbutton,body.div-with-buttonbutton{background-color:#e4c681;}html.div-with-buttonbutton:hover,body.div-with-buttonbutton:hover{background-color:#ffe082;}在Sass中可以这样写，这样会使代码更加清晰、条理和简洁：html,body{高度:100%;#root{高度：100%；}.div-with-button{背景颜色：黑色；按钮{背景颜色：#e4c681;&:hover{背景颜色：#ffe082;}}}}注意写Sass的时候，嵌套不要太深，尽量不要超过三层，否则代码维护起来会比较困难，而且编译成CSS时不需要的选择器会导致CSS文件变大。我们还可以在嵌套中使用&，比如当鼠标悬停在按钮上时改变颜色。在CSS中它看起来像这样：button{background-color:#535353;颜色：#000；}按钮：悬停{背景色：#000；color:#fff;}在Sass中可以这样写：button{background-color:#535353;颜色：#000；&:hover{背景颜色：#000;颜色：#fff；}}通常，&总是指向它上面的元素，并且可以用于伪类和伪元素：。box{&:focus{}&:hover{}&:active{}&:first-child{}&:nth-child(2){}&::after{}&::before{}}编译CSS代码如下：.box:focus{}.box:hover{}.box:active{}.box:frist-child{}.box:nth-child(2){}.box::after{}。box::before{}此外，如果类以相同的单词开头（如box-yellow和box-red），则可以嵌套类：.box{&-yellow{background:#ff6347;}&-red{背景：#ffd700；}&-green{背景：#9acd32;}}像这样编译成CSS：添加图标{背景:{图像:url("./assets/arrow-right-solid.svg");位置：中心中心；重复：不重复；尺寸：14像素14像素；}}上面的代码编译为以下CSS：.add-icon{background-image:url("./assets/arrow-right-solid.svg");背景位置：中心中心；背景重复：不重复；background-size:14px14px;}3.变量变量用于存储数据。在Sass中，我们可以将任何有效的CSS值存储在变量中。变量使用$符号定义：$red:#ee4444;$black:#222;$bg-color:#3e5e9e;$link-color:red;$p-color:#282A36;$font-p:13px;$font-h1:28px;$base-font:'NotoSansKR',sans-serif;变量的使用：body{background-color:$bg-color;字体大小：$font-p；字体系列：$base-font;}h1{字体大小：$font-h1;颜色：$black;}p{字体大小：$font-p;color:$black;}a{color:$link-color;}当Sass被编译为CSS时，所有变量将被替换为定义的变量值。变量可以减少重复、进行复杂的数学运算等等。需要注意的是，CSS变量是有作用域的。顶层的变量都是全局变量，块中定义的变量都是局部变量。全局变量可以在任何地方使用，局部变量只能在变量定义的块中使用。$my-global-variable:"global";div{$my-local-variables:"local";}变量值可以被覆盖：$color:#fefefe;.content{background-color:$color;}$color:#939393;.footer{background-color:$color;}在上面的代码中，content的背景色是#fefefe，footer的背景色是#939393。要更改全局变量，您需要添加!global修饰符：$color:#111;.content{$color:#222;background-color:$color;}.footer{$color:#333!global;}except另外，Sass变量可以指定默认值：$message-color:blue!default;.message{color:$message-color;}编译后的CSS代码如下：p.message{color:blue;}我们可以在@import之前覆盖模块默认值：$message-color:black;@import'my-module';.message{color:$message-color;}编译后的CSS代码如下：p.message{color:black;}即带!default的变量只有在有没有价值。4.Mixins和Includemixin是一组可重用的CSS声明，其语法类似于JavaScript中的函数，使用@mixin指令而不是function关键字。调用mixins是通过@include语句完成的。以下是如何使用mixins将元素水平和垂直居中：@mixinabsolute-center(){position:absolute;左：50%；顶部：50%；transform:translate(-50%,-50%);}.element{@includeabsolute-center();}当然mixin也支持传参：@mixinsquare($size){width:$size;高度：$size;}div{@includesquare(60px);background-color:#000;}参数可以是可选的，可选参数的定义与Sass变量相同：@mixinsquare($width:50px){width:$size;height:$size;}我们也可以将CSS规则传递给mixins。这些规则可以在使用@content的mixin中使用。@mixinhover-not-disabled{&:not([disabled]):hover{@content;}}.button{border:1pxsolidblack;@includehover-not-disabled{边框颜色：蓝色；}}这样mixin中的@content编译后会变成border-color:blue；这有助于减少&:not([disabled]):hover部分的重复。5、@import和@use在CSS中，我们通常会创建多个CSS文件，在需要的时候导入：
