简而言之，Sass是一个CSS预处理器，它将特别功用（如变量，嵌套划定规矩和mixins（偶然称为语法糖））添加到通例CSS中。目标是使编码历程更简朴，更有用。让我们更细致地讨论一下。
什么是CSS预处理器？
CSS预处理器是一种脚本言语，它经由过程许可开发人员用一种言语编写代码然后将其编译成CSS来扩大CSS。Sass多是最受迎接的预处理器，但其他罕见的例子包括Less和Stylus。
什么是SASS？
Sass（Syntactically Awesome Style Sheets）是CSS的扩大，使您可以运用变量，嵌套划定规矩，内联导入等内容。它还有助于坚持构造有序，并许可您更快地竖立款式表。
Sass与一切版本的CSS兼容。运用它的唯一要求是必需装置Ruby。
怎样运用Sass？
句法：
Sass包括两个语法选项：
1、SCSS (Sassy CSS)：运用.scss文件扩大名，完全符合CSS语法
2、Indented (简朴地称为 'Sass')：运用.sass文件扩大名和缩进而不是括号; 它不完全符合CSS语法，但编写起来更快
请注重，可以运用sass-convert敕令将文件从一种语法转换为另一种语法。
变量
与其他编程言语一样，Sass许可运用可存储可在全部款式表中运用的信息的变量。比方，您可以将色彩值存储在文件顶部的变量中，然后在设置元素的色彩时运用此变量。这使您可以疾速变动色彩，而无需零丁修正每一行。
比方：
$font-stack: Helvetica, sans-serif;
$primary-color: red;
body {
font: 100% $font-stack;
color: $primary-color;}
将生成以下CSS：
body {
font: 100% Helvetica, sans-serif;
color: red;
}
嵌套
嵌套是一把双刃剑。虽然它供应了一种削减须要编写的代码量的绝佳要领，但假如不细致实行，它也会致使过分限制的CSS。我们的主意是以一种模拟HTML条理构造的体式格局嵌套CSS选择器。
以下显现了运用嵌套的基础导航款式：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}}
CSS输出以下：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Partials
Partials是较小的Sass文件，可以导入到其他Sass文件中。将partials视为代码片断。运用这些代码片断，我们的CSS如今可以模块化而且更易于保护。部份经由过程运用前导下划线命名为_partial.scss来指定。
导入（Import）
运用部分模板，在@import指令，可以导入你的部份文件到当前文件，竖立一个单一的CSS文件。请注重将为每一个导入生成的HTTP要求运用的导入数目。
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;}
// basefile.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
响应的CSS输出：
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
注重：导入partials时，您不须要包括文件扩大名或下划线。
mixins
运用预处理器的一个长处是可以采纳庞杂，冗杂的代码并简化它。这就是mixins派上用场的处所！
比方，假如您须要包括供应商前缀，则可以运用mixin。看一下border-radius的这个例子：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
注重顶部的@mixin指令。它的称号为border-radius，并运用变量$ radius作为参数。此变量用于设置每一个元素的半径值。
稍后，挪用@include指令以及mixin称号（border-radius）和参数（10px）。因而.box {@include border-radius（10px）; }。
生成以下CSS：
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
扩大/继续
该@extend指令被称为是Sass的最壮大的功用之一。看到它在行为后，很明显为何。
我们的主意是，运用此指令，您没必要在HTML元素上包括多个类名，而且可以坚持代码枯燥。您的选择器可以继续其他选择器的款式，然后在须要时轻松扩大。如今这很壮大。
Sass的长处：
可以在CSS中实行盘算，许可我们实行更多的操纵，比方将像素值转换为百分比。我们还可以接见规范数学函数，如加法，减法，乘法和除法。固然，可以组合这些功用来竖立庞杂的盘算。
另外，Sass还包括一些内置函数来协助操纵数字。像percentage（），floor（）和round（）如许的函数就是一些例子。
总结：以上就是本篇文的全部内容，愿望能对人人的进修有所协助。
以上就是什么是Sass?怎样运用Sass？的细致内容，更多请关注ki4网别的相干文章！
