SassSass的全称是“SyntacticallyAwesomeStyleSheets”，它是一种CSS的扩展语言。变量VariableSass允许变量（最新的CSS也支持变量）。你可以在Sass中声明变量并为它们赋值。在Sass中，变量以$开头，后跟变量名。$文本颜色：红色；使用颜色：$text-color；嵌套CSSNestSass允许嵌套CSS规则，这在组织样式表结构时非常有用。在CSS中，需要将每个元素的样式写在单独的代码块中，如下：对于大型项目，CSS规则可能很复杂。这时候引入嵌套功能（即把子元素的样式写在对应的父元素中）可以有效简化代码：nav{background-color:red;ul{列表样式：无；li{显示：内联块；}}}MixinsReusableCSSReusable在Sass中，mixin是一组CSS声明，可以在整个样式表中重复使用。CSS的新特性需要经过一段时间的适配，所有浏览器才能充分使用。随着浏览器的不断升级，使用这些CSS规则时可能需要添加浏览器前缀。考虑box-shadow:div{-webkit-box-shadow:0px0px4px#fff;-moz-box-shadow:0px0px4px#fff;-ms-box-shadow:0px0px4px#fff;box-shadow:0px0px4px#fff;}为所有具有box-shadow属性的元素覆盖此规则，或更改每个值以测试不同的效果，这将花费大量精力。Mixin就像CSS函数。这是一个例子：@mixinbox-shadow($x,$y,$blur,$c){-webkit-box-shadow:$x$y$blur$c;-moz-box-shadow:$x$y$blur$c;-ms-box-shadow:$x$y$blur$c;盒子阴影：$x$y$blur$c；}定义以@mixin开头，后跟自定义名称。参数（上例中的$x、$y、$blur和$c）是可选的。现在，在需要框阴影规则的地方，它只是一行mixin调用，无需添加所有浏览器前缀。可以通过@include指令调用Mixins。div{@includebox-shadow(0px,0px,4px,#fff);}@if@else逻辑Sass中的@if指令对于测试特定情况非常有用——它的工作方式类似于JavaScript中的if语句。@mixinmake-bold($bool){@if$bool==true{字体粗细：粗体；}}与JavaScript类似，您可以在Sass中使用@elseif和@else来测试更多条件：@mixintext-effect($val){@if$val==danger{color:red;}@elseif$val==alert{颜色：黄色；}@elseif$val==success{颜色：绿色；}@else{颜色：黑色；}}@for循环在Sass中使用@for循环来添加样式，其用法类似于JavaScript中的for循环。@for有两种使用方式：“从头到尾”或“从头到尾”。主要区别在于“从头到尾”不包括结束编号，而“从头到尾”包括结束编号。@for$i从1到12{.col-#{$i}{width:100%/12*$i;}}@for$ifrom1to6{.text-#{$i}{font-大小：15px*$i;}}#{$i}部分是将变量(i)与文本组合成字符串的语法。当Sass文件转换为CSS时，它看起来像这样：.col-1{width:8.33333%;}.col-2{width:16.66667%;}....col-12{width:100%;}这是创建网格布局的有效方式。@each遍历列表Sass还提供了@each指令，它循环遍历列表或映射中的每个项目。在每次迭代中，变量将从列表或映射中分配当前值。@each$colorinblue,red,green{.#{$color}-text{color:$color;}}map语法略有不同。这是一个例子：$colors:(color1:blue,color2:red,color3:green);@each$key,$colorin$colors{.#{$color}-text{color:$color;}}请注意，需要$key变量来引用地图中的键。否则，编译后的CSS将包含color1、color2...以上两个代码示例都会转换为以下CSS：.blue-text{color:blue;}.red-text{color:red;}.green-text{color:green;}@while循环Sass中的@while指令类似于JavaScript中的while。只要满足条件，它就会不断创建CSS代码。$x:1;@while$x<13{.col-#{$x}{宽度：100%/12*$x;$x:$x+1;}PartialsSass中的Partials是CSS代码片段单独的文件。这些片段可以导入到其他Sass文件中使用。可以将类似的代码放入模块中，以保持代码的组织性和可管理性。partials的名称以下划线(_)字符开头，以便Sass知道它是CSS的一小部分并且不会将其转换为CSS文件。此外，Sass文件以.scss文件扩展名结尾。要将部分代码放入另一个Sass文件，请使用@import指令。例如，如果所有mixins都保存在一个名为“_mixins.scss”的部分中，并且您需要在“main.scss”文件中使用它们，那么使用它的方法如下：@import'mixins'注意下划线不是必需的导入语句-Sass知道它是部分的。将partial导入文件后，所有变量、mixins等代码都可以使用。extendSass有一个名为extend的特性，可以很容易地从一个元素借用CSS规则并在另一个元素上重用它们。.panel{背景颜色：红色；高度：70px；border:2pxsolidgreen;}现在需要另一个名为.big-panel的面板。它具有与.panel相同的基本属性，但还需要宽度和字体大小。可以从.panel复制和粘贴初始CSS规则，但是随着添加更多类型的面板，代码变得重复。extend指令是重用为一个元素编写的规则以重用和为另一个元素添加更多规则的一种简单方法：.big-panel{@extend.panel;宽度：150px；font-size:2em;}除了新样式之外，.big-panel将具有与.panel相同的属性。
