Sass - 快速指南

Sass（Syntactically Awesome Stylesheet）是一种CSS预处理器，它有助于减少CSS中的重复代码并节省时间。它是一种更稳定、更强大的CSS扩展语言，能够清晰、结构化地描述文档样式。

Sass最初由Hampton Catlin设计，并由Natalie Weizenbaum于2006年开发。后来，Weizenbaum和Chris Eppstein使用其初始版本扩展了Sass，加入了SassScript功能。

为什么使用Sass？

• 它是一种预处理语言，为CSS提供了缩进语法（自己的语法）。
• 它提供了一些功能，用于创建样式表，使编写代码更高效且易于维护。
• 它是CSS的超集，意味着它包含CSS的所有功能，是一个用Ruby编写的开源预处理器。
• 它以良好的、结构化的格式提供文档样式，比扁平的CSS更好。它使用可重用的方法、逻辑语句和一些内置函数，如颜色操作、数学和参数列表。

Sass的特点

• 它更稳定、更强大，并且与CSS版本兼容。
• 它是CSS的超集，基于JavaScript。
• 它被称为CSS的语法糖，意味着它使用户更容易阅读或更清晰地表达事物。
• 它使用自己的语法，并编译成可读的CSS。
• 您可以在更少的时间内用更少的代码编写CSS。
• 它是一个开源预处理器，被解释成CSS。

Sass的优势

• 它允许在编程结构中编写干净的CSS。
• 它有助于快速编写CSS。
• 它是CSS的超集，有助于设计师和开发者更高效、更快地工作。
• 由于Sass与所有CSS版本兼容，我们可以使用任何可用的CSS库。
• 可以使用嵌套语法和有用的函数，如颜色操作、数学和其他值。

Sass的缺点

• 开发者需要时间来学习此预处理器中的新功能。
• 如果许多人正在处理同一个网站，则应使用相同的预处理器。有些人使用Sass，有些人直接使用CSS编辑文件。因此，在网站上工作变得困难。
• 可能会失去浏览器内置元素检查器的好处。

Sass - 安装

在本章中，我们将学习逐步安装Ruby的步骤，Ruby用于执行Sass文件。

Sass的系统要求

• 操作系统 - 跨平台
• 浏览器支持 - IE（Internet Explorer 8+）、Firefox、Google Chrome、Safari、Opera
• 编程语言 - Ruby

Ruby的安装

步骤1 - 打开链接https://www.ruby-lang.org/en/downloads/，您将看到如下所示的屏幕 -

下载zip文件的当前稳定版本。

步骤2 - 接下来，运行安装程序在系统上安装Ruby。

步骤3 - 接下来，将Ruby bin文件夹添加到您的PATH用户变量和系统变量中，以便使用gem命令。

路径用户变量 -

• 右键单击我的电脑图标。
• 选择属性。
• 接下来，单击高级选项卡，然后单击环境变量。

在环境变量窗口中，双击PATH，如下图所示 -

您将获得一个编辑用户变量框，如所示。在变量值字段中添加ruby bin文件夹路径为C:\Ruby\bin。如果路径已为其他文件设置，则在该路径后放置分号并添加Ruby文件夹路径，如下所示。

单击确定按钮。

系统变量 -

• 单击新建按钮。

接下来，显示新建系统变量块，如下图所示。

• 在变量名字段中输入RubyOpt，在变量值字段中输入rubygems。写入变量名和值后，单击确定按钮。

步骤4 - 在系统中打开命令提示符，输入以下行 -

gem install sass

步骤5 - 接下来，成功安装Sass后，您将看到以下屏幕。

示例

以下是Sass的简单示例。

现在，我们将创建一个名为style.scss的文件，它与CSS非常相似，唯一的区别是它将保存为.scss扩展名。.htm和.scss文件都应在文件夹ruby内创建。您可以将.scss文件保存在文件夹ruby\lib\sass\中（在此过程之前，在lib目录中创建一个名为sass的文件夹）。

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

您可以使用以下命令告诉Sass监视文件，并在Sass文件更改时更新CSS -

sass --watch C:\ruby\lib\sass\style.scss:style.css

当您运行上述命令时，它将自动创建style.css文件。每当您更改SCSS文件时，style.css文件将自动更新。

当您运行上述命令时，style.css文件将包含以下代码 -

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

让我们执行以下步骤来查看上述代码如何工作 -

• 将上述代码保存在hello.html文件中。
• 在浏览器中打开此HTML文件。

Sass - 语法

在本章中，我们将学习Sass语法。Sass支持两种语法，即SCSS和缩进语法。

• SCSS（Sassy CSS）是CSS语法的扩展。这意味着每个有效的CSS也是有效的SCSS。SCSS更容易维护大型样式表，并且可以识别特定于供应商的语法，许多CSS和SCSS文件使用扩展名.scss。
• 缩进 - 这是较旧的语法，有时仅称为Sass。使用这种语法形式，可以简洁地编写CSS。Sass文件使用扩展名.sass。

Sass缩进语法

Sass缩进语法或仅Sass是基于CSS的SCSS语法的替代方案。

• 它使用缩进而不是{和}来分隔块。
• 它使用换行符而不是分号(;)来分隔语句。
• 属性声明和选择器必须放在自己的行上，而{和}内的语句必须放在新行上并缩进。

例如，考虑以下SCSS代码 -

.myclass {
   color = red;
   font-size = 0.2em;
}

缩进语法是较旧的语法，不建议在新Sass文件中使用。如果您使用此文件，它将在CSS文件中显示错误，因为我们使用=而不是设置属性和变量。

使用以下命令编译上述代码 -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来，运行上述命令；它将在style.css文件中显示错误，如下所示 -

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Sass的语法差异

大多数CSS和SCSS语法在Sass中都能完美工作。但是，有一些差异，将在以下部分解释 -

属性语法

CSS属性可以以两种方式声明 -

• 属性可以类似于CSS声明，但没有分号(;)。
• 冒号(:)将作为每个属性名称的前缀。

例如，您可以这样写 -

.myclass
   :color red
   :font-size 0.2em

默认情况下，可以使用上述两种方式（不带分号的属性声明和作为属性名称前缀的冒号）。但是，当您使用:property_syntax选项时，只允许指定一种属性语法。

多行选择器

在缩进语法中，选择器可以在逗号出现后的新行上放置。

示例

以下示例描述了SCSS文件中多行选择器的使用 -

接下来，创建文件style.scss。注意.scss扩展名。

style.scss

.class1,
.class2{
   color:red;
}

您可以使用以下命令告诉Sass监视文件，并在Sass文件更改时更新CSS -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来，执行上述命令，它将自动创建style.css文件，代码如下 -

生成的style.css如下所示 -

style.css

.class1,
.class2 {
   color: red;
}

输出

让我们执行以下步骤来查看上述代码如何工作 -

• 将上述html代码保存在multiline_selectors.html文件中。
• 在浏览器中打开此HTML文件，输出显示如下。

注释

注释占用整行，并包含嵌套在其下的所有文本。在缩进语法中，它们是基于行的。有关注释的更多信息，请参阅此链接。

@import

在Sass中，@import指令可以带/不带引号编写。与SCSS不同，它们必须与引号一起使用。

例如，在SCSS中，@import指令可以如下使用 -

@import "themes/blackforest";
@import "style.sass";

这可以在Sass中编写为 -

@import themes/blackforest
@import fontstyle.sass

Mixin指令

Sass支持@mixin和@include等指令的简写形式。您可以使用=和+字符代替@mixin和@include，这需要更少的输入，使您的代码更简单、更易读。

例如，您可以将mixin指令编写为 -

=myclass
   font-size: 12px;
p
   +myclass

上述代码与以下代码相同 -

@mixin myclass
   font-size: 12px;
p
   @include myclass

已弃用的语法

Sass支持使用一些旧语法。但是，在Sass中使用此语法不推荐。如果使用此语法，将显示警告，并在以后的版本中删除。下表显示了一些旧语法。

序号	运算符 & 描述
1	= 当将变量和属性设置为SassScript值时，它被用作:的替代。
2	||= 每当您为变量分配默认值时，它被用作:的替代。
3	! !被用作变量前缀，而不是$。当它被用作$的替代时，功能不会改变。

使用Sass

Sass更强大、更稳定，通过使用CSS扩展为基本语言提供功能。您可以通过三种不同的方式使用Sass -

• 作为命令行工具
• 作为Ruby模块
• 作为Rack启用框架的插件

如果您在Windows上使用Sass，则需要先安装Ruby。有关安装Ruby的更多信息，请参阅Sass安装章节。

下表显示了用于执行Sass代码的命令 -

序号	命令 & 描述
1	sass input.scss output.css 它用于从命令行运行Sass代码。
2	sass --watch input.scss:output.css 它通知Sass监视文件，并在Sass文件更改时更新CSS。
3	sass --watch app/sass:public/stylesheets 如果Sass在目录中包含许多文件，则用于监视整个目录。

Rack/Rails/Merb插件

Rack是一个Web服务器接口，用于在Ruby中开发Web应用程序。有关Rack的信息，请访问此链接。

您可以使用config文件夹下的environment.rb文件在Rails 3版本中启用Sass。使用以下代码为Rails 3启用Sass -

config.gem "sass"

您可以将以下行添加到Rails 3（及更高版本）的Gemfile中 -

gem "sass"

Rails是一个开源Web框架，使用JSON、HTML、CSS和JavaScript等Web标准来显示用户界面。要使用Rails，您需要具备Ruby和面向对象编程的基本知识。有关Rails框架的更多信息，请在此处了解。

如果您想在Rack应用程序中启用Sass，请将以下行添加到应用程序根目录下的config.ru文件中 -

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merb是一个Web应用程序框架，为Rails提供速度和模块化。要了解有关Merb的更多信息，请打开此链接。

您可以通过将以下行添加到config/dependencies.rb文件中来在Merb中启用Sass -

dependency "merb-haml"

缓存

Sass缓存文档，如模板和部分，这些文档可以重用而无需重新解析，除非它们已更改。它使Sass文件的编译更快，当模板分为单独的文件并全部导入到一个大文件中时，效果更好。如果您删除缓存文件，它们将在下次编译时重新生成。

选项

您可以使用以下行在Rails的environment.rb文件或Rack应用程序的config.ru文件中设置选项 -

Sass::Plugin.options[:style] = :compact

您还可以使用以下行在Merb的init.rb文件中设置选项 -

Merb::Plugin.config[:sass][:style] = :compact

下表描述了SASS和SCSS的一些可用选项 -

序号	选项 & 描述
1	:style 它显示输出的样式。
2	:syntax 您可以使用sass的缩进语法和scss的CSS扩展语法。
3	:property_syntax 它使用缩进语法来使用属性。如果不正确，它将抛出错误。例如，考虑"background: #F5F5F5"，其中background是属性名称，#F5F5F5是其属性值。您必须在属性名称后使用冒号。
4	:cache 它加快Sass文件的编译速度。默认设置为true。
5	:read_cache 如果未设置cache而设置了read_cache，它只读取Sass文件。
6	:cache_store 通过将其设置为Sass::CacheStores::Base的实例，可用于存储和访问缓存结果。
7	:never_update 如果模板文件更改，它绝不应更新CSS文件。默认设置为false。
8	:always_update 它应在模板文件更改时更新CSS文件。
9	:always_check 它应在服务器启动时检查更新。如果Sass模板文件有更新，它将重新编译并覆盖CSS文件。
10	:poll 通过将其设置为true，它为Sass::Plugin::Compiler#watch（监视模板和CSS文件更新）使用轮询后端。
11	:full_exception 每当Sass代码在生成的CSS文件中发生异常时，它显示错误描述。它显示错误发生的位置以及CSS文件中的源代码。
12	:template_location 它提供应用程序中模板目录的路径。
13	:css_location 它提供应用程序中CSS样式表的路径。
14	:unix_newlines 通过将其设置为true，它在写入文件时提供Unix样式换行符。
15	:filename 它是正在显示并用于报告错误的文件名。
16	:line 它指定Sass模板的第一行，并显示错误的行号。
17	:load_paths 它用于加载使用@import指令包含的Sass模板的路径。
18	:filesystem_importer 它用于从文件系统导入文件，使用Sass::Importers::Base子类处理字符串加载路径。
19	:sourcemap 它生成源映射，指示浏览器查找Sass样式。它使用三个值 - :auto - 它包含相对URI。如果没有相对URI，则使用"file:"URI。 :file - 它使用"file:"URI，在本地工作，不在远程服务器上工作。 :inline - 它在源映射中包含源文本，用于创建大型源映射文件。
20	:line_numbers 通过将其设置为true，它显示CSS文件中报告错误的行号。
21	:trace_selectors 当设置为true时，它有助于跟踪导入和mixin的选择器。
22	:debug_info 当设置为true时，它使用行号和文件提供Sass文件的调试信息。
23	:custom 它使数据可用于单独应用程序中的Sass函数。
24	:quiet 通过将其设置为true，它禁用警告。

语法选择

您可以使用Sass命令行工具确定在Sass模板中使用的语法。默认情况下，Sass使用缩进语法，这是基于CSS的SCSS语法的替代方案。您可以使用SCSS命令行程序，它与Sass程序类似，但默认情况下，它认为语法是SCSS。

编码

Sass通过指定以下CSS规范使用样式表的字符编码 -

• 首先，它检查Unicode字节，然后是@charset声明，最后是Ruby字符串编码。
• 接下来，如果未设置任何内容，则它将字符集编码视为UTF-8。
• 通过使用@charset声明明确确定字符编码。只需在样式表开头使用"@charset 编码名称"，Sass将假定这是给定的字符编码。
• 如果Sass的输出文件包含非ASCII字符，则它将使用@charset声明。

Sass - CSS扩展

在本章中，我们将学习CSS扩展。CSS扩展可用于增强网页的功能。下表列出了Sass中使用的一些CSS扩展 -

序号	CSS扩展 & 描述
1	嵌套规则 这是一种在一个CSS规则内组合多个CSS规则的方法。
2	引用父选择器: & 这是使用&字符选择父选择器的过程。
3	嵌套属性 它允许将属性嵌套到其他属性中，从而将相关代码分组。
4	占位符选择器 Sass支持使用类或id选择器的占位符选择器，通过使用@extend指令。

Sass - 注释

在本章中，我们将学习Sass注释。注释是放置在源代码中的不可执行语句。注释使源代码更易于理解。Sass支持两种类型的注释。

• 多行注释 - 使用/*和*/编写。多行注释保留在CSS输出中。
• 单行注释 - 使用//后跟注释编写。单行注释不保留在CSS输出中。

示例

以下示例演示了SCSS文件中注释的使用 -

接下来，创建文件style.scss。

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

您可以使用以下命令告诉Sass监视文件，并在Sass文件更改时更新CSS -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来，执行上述命令，它将自动创建style.css文件，代码如下 -

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

输出

让我们执行以下步骤来查看上述代码如何工作 -

• 将上述html代码保存在sass_comments.html文件中。
• 在浏览器中打开此HTML文件，输出显示如下。

要研究多行注释中的插值，请单击此链接。

Sass多行注释中的插值

描述

多行注释中的插值在生成的CSS中解析。您可以在大括号内指定变量或属性名称。

语法

$var : "value";
/* multiline comments #{$var} */

示例

以下示例演示了SCSS文件中多行注释中插值的使用 -

接下来，创建文件style.scss。

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

您可以使用以下命令告诉Sass监视文件，并在Sass文件更改时更新CSS -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来，执行上述命令；它将自动创建style.css文件，代码如下

style.css

/* Framework version for the generated CSS is 7.8. */

输出

让我们执行以下步骤来查看上述代码如何工作 -

• 将上述html代码保存在sass_comments_interpolation.htm文件中。
• 在浏览器中打开此HTML文件，输出显示如下。

Sass - 脚本

Sass使用一组称为SassScript的小扩展，这些扩展可以包含在Sass文档中，以从属性值计算变量，并使用变量属性、算术和其他函数。使用mixin时，SassScript也可以与选择器和属性名称一起使用（mixin允许在整个样式表中重用CSS样式）。

下表列出了Sass中使用的一些CSS扩展 -

序号	CSS扩展 & 描述
1	交互式Shell 它使用命令行评估SassScript表达式。
2	变量 它表示数据，如数值、字符或内存地址。
3	数据类型 它为每个数据对象声明数据类型。
4	操作 它提供数字、颜色、字符串、布尔值和列表等操作。
5	括号 它是一对通常用圆括号( )或方括号[]标记的符号。
6	函数 它通过提供一些关键字参数支持函数的使用。
7	插值 它使用#{ }语法提供SassScript变量和属性名称。
8	SassScript中的& 它允许将属性嵌套到其他属性中，从而将相关代码分组。
9	变量默认值 它允许将属性嵌套到其他属性中，从而将相关代码分组。

Sass - @规则和指令

下表列出了您可以在Sass中使用的所有规则和指令。

序号	指令 & 描述
1	@import 它导入Sass或SCSS文件，直接获取要导入的文件名。
2	@media 它将样式规则设置为不同的媒体类型。
3	@extend @extend指令用于在选择器之间共享规则和关系。
4	@at-root @at-root指令是一组嵌套规则，能够在文档根级别创建样式块。
5	@debug @debug指令检测错误并将SassScript表达式值显示到标准错误输出流。
6	@warn @warn指令用于给出关于问题的警告性建议；它将SassScript表达式值显示到标准错误输出流。
7	@error @error指令将SassScript表达式值显示为致命错误。

Sass - 控制指令和表达式

在本章中，我们将学习控制指令和表达式。基于某些条件进行样式设置或多次应用具有变化的相同样式可以通过使用SassScript支持的控制指令和表达式来实现。这些控制指令是主要在mixin中使用的高级选项。它们需要相当大的灵活性，因为它们是Compass库的一部分。

下表列出了Sass中使用的控制指令和表达式 -

序号	控制指令和表达式 & 描述
1	if() 基于条件，if()函数从两个可能的结果中只返回一个结果。
2	@if @if指令接受SassScript表达式，只要表达式的结果不是false或null，就使用嵌套样式。
3	@for @for指令允许您在循环中生成样式。
4	@each 在@each指令中，定义了一个变量，其中包含列表中每个项目的值。
5	@while 它接受SassScript表达式，直到语句评估为false，它才迭代输出嵌套样式。

Sass - Mixin指令

Mixin允许创建一组样式，这些样式可以在整个样式表中重用，而无需重新创建非语义类。在CSS中，mixin可以存储多个值或参数并调用函数；它有助于避免编写重复代码。Mixin名称可以互换使用下划线和连字符。以下是Mixin中存在的指令 -

序号	指令 & 描述
1	定义Mixin @mixin指令用于定义mixin。
2	包含Mixin @include指令用于在文档中包含mixin。
3	参数 SassScript值可以作为mixin中的参数，在包含mixin时给出，并在mixin内作为变量可用。
4	将内容块传递给Mixin 样式块被传递给mixin。

Sass - 函数指令

在本章中，我们将学习函数指令。在Sass中，您可以创建自己的函数并在脚本上下文中使用它们，或者与任何值一起使用。函数通过使用函数名称和任何参数来调用。

示例

以下示例演示了SCSS文件中函数指令的使用 -

function_directive.htm

接下来，创建文件style.scss。

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
   @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

您可以使用以下命令告诉Sass监视文件，并在Sass文件更改时更新CSS -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来，执行上述命令；它将自动创建style.css文件，代码如下 -

style.css

#set_width {
   padding-left: 95px; 
}

输出

让我们执行以下步骤来查看上述代码如何工作 -

• 将上述html代码保存在function_directive.html文件中。
• 在浏览器中打开此HTML文件，输出显示如下。

在输出中，您可以看到应用了左内边距。

就像mixin一样，函数也可以访问全局定义的变量并接受参数。您应该使用@return调用函数的返回值。我们可以使用关键字参数调用Sass定义的函数。

如下所示调用上述函数。

#set_width { padding-left: adjust_width($n: 10); }

命名约定

为了避免命名冲突，函数名称可以加前缀，以便轻松区分。与mixin一样，用户定义的函数也支持变量参数。函数和其他Sass标识符可以互换使用下划线(_)和连字符(-)。

例如，如果函数定义为adjust_width，它可以作为adjust-width使用，反之亦然。

Sass - 输出样式

在本章中，我们将学习Sass输出样式。Sass生成的CSS文件由默认CSS样式组成，该样式反映文档的结构。默认CSS样式很好，但可能不适合所有情况；另一方面，Sass支持许多其他样式。

它支持以下不同的输出样式 -

:nested

嵌套样式是Sass的默认样式。当您处理大型CSS文件时，这种样式非常有用。它使文件结构更易读且易于理解。每个属性占用自己的行，每个规则的缩进基于其嵌套深度。

例如，我们可以在Sass文件中嵌套代码，如下所示 -

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

:expanded

在扩展类型的CSS样式中，每个属性和规则都有自己的行。与嵌套CSS样式相比，它占用更多空间。规则部分包含所有缩进的属性，而规则不遵循任何缩进。

例如，我们可以在Sass文件中扩展代码，如下所示 -

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:compact

紧凑的CSS样式比扩展和嵌套样式占用更少的空间。它主要关注选择器而不是其属性。每个选择器占用一行，其属性也放在同一行中。嵌套规则彼此相邻放置，没有换行符，单独的规则组之间将有换行符。

例如，我们可以在Sass文件中压缩代码，如下所示 -

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

:compressed

压缩的CSS样式比上述讨论的所有其他样式占用最少的空间。它仅提供空格来分隔选择器，并在文件末尾提供换行符。这种样式令人困惑且不易阅读。

例如，我们可以在Sass文件中压缩代码，如下所示 -

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}

扩展Sass

您可以扩展Sass的功能，为用户提供不同类型的功能和自定义。要使用这些功能，用户应具备Ruby知识。

定义自定义Sass函数

在使用Ruby API时，您可以定义自己的Sass函数。您可以通过将它们添加到Ruby方法中来添加自定义函数，如下面的代码所示 -

module Sass::Script::Functions
   def reverse(string)
      assert_type string, :String
      Sass::Script::Value::String.new(string.value.reverse)
   end
   declare :reverse, [:string]
end

在代码中，您可以看到，Function、declare指定了函数的参数名称。如果失败，即使函数正在工作，它也不会接受任何参数，并且它还采用任意关键字参数。您可以使用value访问器获取Ruby值，并使用rgb, red, green或blue访问颜色对象。

缓存存储

Sass存储已解析文档的缓存，这些缓存可以重用而无需重新解析，除非它们已更改。SASS使用:cache_location将缓存文件写入文件系统。它使Sass文件的编译更快，如果您删除缓存文件，它们将在下次编译时重新生成。您可以通过设置:cache_store选项来定义自己的缓存存储。这将在文件系统上写入缓存文件，或将缓存文件共享到Ruby进程或机器。SASS使用Sass::CacheStores::Base子类的实例来存储和检索缓存结果。

自定义导入器

SASS使用@import导入SCSS和SASS文件，并将路径传递给@import规则，以查找指定路径的适当路径代码。SASS导入器使用文件系统加载代码，并使用数据库或不同的文件命名方案添加到加载中。

单个导入器可以采用单个文件加载，并可以与文件系统路径一起放在:load_paths数组中。使用@import时，SASS查找加载的路径，这些路径导入导入器的路径。找到路径后，使用导入的文件。用户可以从Sass::Importers::Base继承导入器。