简而言之，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允许使用可存储可在整个样式表中使用的信息的变量。例如，您可以将颜色值存储在文件顶部的变量中，然后在设置元素的颜色时使用此变量。这使您可以快速更改颜色，而无需单独修改每一行。

例如：

1

2

3

4

5

6

$font-stack:    Helvetica, sans-serif;

$primary-color: red;

 

body {

  font: 100% $font-stack;

  color: $primary-color;}

将生成以下CSS：

1

2

3

4

body {

  font: 100% Helvetica, sans-serif;

  color: red;

}



嵌套

嵌套是一把双刃剑。虽然它提供了一种减少需要编写的代码量的绝佳方法，但如果不仔细执行，它也会导致过度限定的CSS。我们的想法是以一种模仿HTML层次结构的方式嵌套CSS选择器。

以下显示了使用嵌套的基本导航样式：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

 

  li { display: inline-block; }

 

  a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

  }}

CSS输出如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

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请求使用的导入数量。

1

2

3

4

5

6

7

8

// _reset.scss

 

html,

body,

ul,

ol {

   margin: 0;

  padding: 0;}

1

2

3

4

5

6

// basefile.scss

@import 'reset';

body {

  font: 100% Helvetica, sans-serif;

  background-color: #efefef;

}

相应的CSS输出：

1

2

3

4

5

6

7

8

html, body, ul, ol {

  margin: 0;

  padding: 0;

}

body {

  font: 100% Helvetica, sans-serif;

  background-color: #efefef;

}

注意：导入partials时，您不需要包含文件扩展名或下划线。

mixins

使用预处理器的一个优点是能够采用复杂，冗长的代码并简化它。这就是mixins派上用场的地方！

例如，如果您需要包含供应商前缀，则可以使用mixin。看一下border-radius的这个例子：

1

2

3

4

5

6

7

8

9

@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：

1

2

3

4

5

6

.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（）这样的函数就是一些例子。

Saab是Software-as-a-service（软件即服务）。SaaS在业内的叫法是软件运营，或称软营。是一种基于互联网提供软件服务的应用模式。一种随着互联网技术的发展和应用软件的成熟，在21世纪开始兴起的完全创新的软件应用模式，是软件科技发展的最新趋势。

简单讲：Saas是新兴的软件应用模式，是一种软件布局模型，其应用专为网络交付而设计，便于用户通过互联网托管、部署及接入。传统软件，尤其是专业领域的软件，在交付之前，就得经过调研、方案制定、产品研发、调试等相当繁琐的过程。而Saas省去了这些环节，只要你有电脑和网络，直接登录即可使用，甚为快捷、方便！

Sass 是 Syntactically Awesome Stylesheets 的简写，是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个将脚本解析成 CSS 的脚本语言（SassScript），也是一款 CSS 预处理器，它减少了 CSS 的重复，也因此节省了时间。Sass 是最早的 CSS 预处理语言，有比 Less 更强大的功能。Sass 扩展了 CSS3，增加了规则、变量、混入选择器、继承等特性。

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。

Sass 是 Syntactically Awesome Stylesheets 的简写，是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个将脚本解析成 CSS 的脚本语言(SassScript)，也是一款 CSS 预处理器，它减少了 CSS 的重复，也因此节省了时间。Sass 是最早的 CSS 预处理语言，有比 Less 更强大的功能。Sass 扩展了 CSS3，增加了规则、变量、混入选择器、继承等特性。

Sass(英文全称：Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。