Sass - 快速指南
Sass - 概述
什么是SASS？
SASS（Syntropically Awesome Stylesheet）是一个 CSS 预处理器，有助于减少 CSS 的重复并节省时间。它是更稳定、更强大的 CSS 扩展语言，可以清晰、结构化地描述文档的风格。
它最初由Hampton Catlin设计，并由Natalie Weizenbaum于 2006 年开发。后来，Weizenbaum和Chris Eppstein使用其初始版本，通过 SassScript 扩展了 Sass。
为什么要使用 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的简单例子。
<html>
<head>
<title> Import example of sass</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1>Simple Example</h1>
<h3>Welcome to TutorialsPoint</h3>
</body>
</html>
现在，我们将创建文件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文件将包含以下代码 -
样式.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 文件中多行选择器的使用 -
<html>
<head>
<title>Multiline Selectors</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Example using Multiline Selectors</h2 >
<p class = "class1">Welcome to Tutorialspoint!!!</p>
<p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
</body>
</html>
接下来，创建文件style.scss。请注意.scss扩展名。
样式.scss
.class1,
.class2{
color:red;
}
您可以使用以下命令告诉 SASS 监视文件并在 SASS 文件发生更改时更新 CSS -
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，执行上面给出的命令，它将使用以下代码自动创建style.css文件 -
生成的style.css如下所示 -
样式.css
.class1,
.class2 {
color: red;
}
输出
让我们执行以下步骤来看看上面给出的代码是如何工作的 -
将上面给出的 html 代码保存在multiline_selectors .html 文件中。
在浏览器中打开此 HTML 文件，输出如下所示。
评论
注释占据一整行并包含嵌套在其下的所有文本。它们是基于行的缩进语法。有关评论的更多信息，请参阅此链接。
@进口
在 SASS 中，@import指令可以带/不带引号编写。与 SCSS 不同，它们必须与引号一起使用。
例如，在 SCSS 中，@import指令可以用作 -
@import "themes/blackforest"; @import "style.sass";
这可以在 SASS 中写为 -
@import themes/blackforest @import fontstyle.sass
混合指令
SASS 支持@mixin和@include等指令的简写。您可以使用=和+字符来代替@mixin和@include，这需要更少的输入，并使您的代码更简单、更易于阅读。
例如，您可以将 mixin 指令编写为 -
=myclass font-size: 12px; p +myclass
上面给出的代码与 -
@mixin myclass font-size: 12px; p @include myclass
已弃用的语法
SASS 支持使用一些旧语法。但是，不建议在 SASS 中使用此语法。如果您使用此语法，则会显示警告，并且在后续版本中将其删除。下表显示了一些旧语法。
| S. 编号 | 运算符及描述 |
|---|---|
| 1 | = 当将变量和属性设置为 SassScript 的值时，它被用来代替 : 。 |
| 2 | ||= 每当您分配变量的默认值时，都会使用它来代替 : 。 |
| 3 | ！ 而不是 $, ! 被用作变量前缀。当使用它代替 $ 时，功能不会改变。 |
使用 Sass
SASS通过CSS的扩展为基础语言提供了强大的支持，更加强大和稳定。您可以通过三种不同的方式使用 SASS -
- 作为命令行工具
- 作为 Ruby 模块
- 作为 Rack 启用框架的插件
如果您在 Windows 上使用 SASS，那么您需要先安装Ruby。有关安装 Ruby 的更多信息，请参阅SASS 安装章节。
下表显示了用于执行 SASS 代码的命令 -
| S. 编号 | 命令与说明 |
|---|---|
| 1 |
sass 输入.scss 输出.css 它用于从命令行运行 SASS 代码。 |
| 2 |
sass --watch input.scss:output.css 它通知 SASS 监视该文件并在 SASS 文件发生更改时更新 CSS。 |
| 3 |
sass --watch 应用程序/sass:public/样式表 如果 SASS 目录中包含许多文件，则用于监视整个目录。 |
机架/导轨/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/dependency.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有一些可用选项，如下表所述 -
| S. 编号 | 选项和说明 |
|---|---|
| 1 |
：风格 它显示输出的样式。 |
| 2 |
：句法 您可以对sass使用缩进语法，对scss使用 CSS 扩展语法。 |
| 3 |
:property_syntax 它使用缩进语法来利用属性。如果不正确，则会抛出错误。例如，考虑“background：#F5F5F5”，其中background是属性名称，#F5F5F5是其属性值。属性名称后必须使用冒号。 |
| 4 |
：缓存 它加快了 SASS 文件的编译速度。默认情况下它设置为 true。 |
| 5 |
:读缓存 如果未设置cache且设置了read_cache ，则仅读取SASS文件。 |
| 6 |
:缓存存储 通过将其设置为Sass::CacheStores::Base的实例，它可用于存储和访问缓存结果。 |
| 7 |
:从不更新 如果模板文件发生更改，它永远不应该更新 CSS 文件。默认情况下它设置为 false。 |
| 8 |
: 总是更新 每当模板文件发生更改时，它都应该更新 CSS 文件。 |
| 9 |
：总是检查 每当服务器启动时，它都应该检查更新。如果 SASS 模板文件中有更新，它将重新编译并覆盖 CSS 文件。 |
| 10 |
：轮询 它通过将其设置为 true 来使用 Sass::Plugin::Compiler#watch 的轮询后端（监视 CSS 文件的模板和更新） 。 |
| 11 |
:完整异常 每当生成的 CSS 文件中的 SASS 代码发生异常时，它都会显示错误描述。它显示发生错误的行号以及 CSS 文件中的源代码。 |
| 12 |
:模板_位置 它提供应用程序中模板目录的路径。 |
| 13 |
:css_位置 它提供应用程序中 CSS 样式表的路径。 |
| 14 |
:unix_换行符 通过将其设置为 true，它在写入文件时提供 Unix 风格的换行符。 |
| 15 |
：文件名 它是正在显示并用于报告错误的文件名的名称。 |
| 16 |
：线 它指定 SASS 模板的第一行并显示错误的行号。 |
| 17 号 |
:加载路径 它用于加载使用@import指令包含的SASS模板的路径。 |
| 18 |
:文件系统导入器 它用于从使用Sass::Importers::Base子类处理字符串加载路径的文件系统导入文件。 |
| 19 |
:源图 它生成指示浏览器查找 SASS 样式的源映射。它使用三个值 -
|
| 20 |
:行号 通过将其设置为 true，它会显示 CSS 文件中报告的错误的行号。 |
| 21 |
:trace_选择器 当它设置为 true 时，它有助于跟踪导入和混合的选择器。 |
| 22 |
：调试信息 当设置为 true 时，它使用行号和文件提供 SASS 文件的调试信息。 |
| 23 |
：风俗 它使数据可供单独应用程序中的 SASS 函数使用。 |
| 24 |
：安静的 它将其设置为 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 扩展 -
| S. 编号 | CSS 扩展和描述 |
|---|---|
| 1 | 嵌套规则
它是一种将多个 CSS 规则相互组合的方法。 |
| 2 | 引用父选择器：&
这是使用&字符选择父选择器的过程。 |
| 3 | 嵌套属性
它允许将属性嵌套到其他属性中，从而导致对另一个相关代码进行分组。 |
| 4 | 占位符选择器
Sass通过使用@extend指令支持使用类或 id 选择器的占位符选择器。 |
Sass - 评论
在本章中，我们将学习 Sass Comments。注释是不可执行的语句，位于源代码中。注释使源代码更容易理解。SASS 支持两种类型的注释。
多行注释- 这些注释是使用 /* 和 */ 编写的。多行注释保留在 CSS 输出中。
单行注释- 这些注释是使用//后跟注释编写的。CSS 输出中不保留单行注释。
例子
以下示例演示了 SCSS 文件中注释的使用 -
<html>
<head>
<title>SASS comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
</body>
</html>
接下来，创建文件style.scss。
样式.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文件，代码如下 -
样式.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 文件中多行注释中插值的使用 -
<html>
<head>
<title>SASS comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<p>This is an example for Interpolation in SASS.</p>
</body>
</html>
接下来，创建文件style.scss。
样式.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文件
样式.css
/* Framework version for the generated CSS is 7.8. */
输出
让我们执行以下步骤来看看上面给出的代码是如何工作的 -
将上面给出的 html 代码保存在 sass_comments_interpolation.htm文件中。
在浏览器中打开此 HTML 文件，输出如下所示。
Sass - 脚本
SASS 使用一小组称为 SassScript 的扩展，它可以包含在 SASS 文档中来根据属性值计算变量，并使用变量、算术和其他函数的属性。在使用 mixins 时，SassScript 还可以与选择器和属性名称一起使用（Mixins 允许在整个样式表中重复使用 CSS 样式）。
下表列出了 SASS 中使用的一些 CSS 扩展 -
| S. 编号 | CSS 扩展和描述 |
|---|---|
| 1 | 交互式外壳
它使用命令行评估 SassScript 表达式。 |
| 2 | 变量
它表示数值、字符或内存地址等数据。 |
| 3 | 数据类型
它声明每个数据对象的数据类型。 |
| 4 | 运营
它提供数字、颜色、字符串、布尔和列表等操作。 |
| 5 | 括号
它是一对符号，通常用圆括号（）或方括号[]分隔。 |
| 6 | 功能
它通过提供一些关键字参数来支持函数的使用。 |
| 7 | 插值法
它使用#{ }语法提供 SassScript 变量和属性名称。 |
| 8 | & 在 SassScript 中
它允许将属性嵌套到另一个属性中，从而导致另一个相关代码组。 |
| 9 | 变量默认值
它允许将属性嵌套到另一个属性中，从而导致另一个相关代码组。 |
Sass - @-规则和指令
下表列出了您可以在 SASS 中使用的所有规则和指令。
| S. 编号 | 指令和说明 |
|---|---|
| 1 | @进口
它导入SASS或SCSS文件，它直接获取文件名来导入。 |
| 2 | @媒体
它将样式规则设置为不同的媒体类型。 |
| 3 | @延长
@extend 指令用于共享选择器之间的规则和关系。 |
| 4 | @根目录
@at-root指令是嵌套规则的集合，它能够在文档的根目录下创建样式块。 |
| 5 | @调试
@debug 指令检测错误并将 SassScript 表达式值显示到标准错误输出流。 |
| 6 | @警告
@warn指令用于给出有关问题的警告建议；它将 SassScript 表达式值显示到标准错误输出流。 |
| 7 | @错误
@error 指令将 SassScript 表达式值显示为致命错误。 |
Sass - 控制指令和表达式
在本章中，我们将学习控制指令和表达式。基于某些条件的样式或多次应用相同的样式（但有变化）可以通过使用 SassScript 支持的控制指令和表达式来完成。这些控制指令是主要在 mixins 中使用的高级选项。它们需要相当大的灵活性，因为它们是 Compass 库的一部分。
下表列出了 SASS 中使用的控制指令和表达式 -
| S. 编号 | 控制指令和带有描述的表达式 |
|---|---|
| 1 | 如果（）
根据条件，if()函数仅返回两种可能结果中的一个结果。 |
| 2 | @如果
@if指令接受 SassScript 表达式，并在表达式的结果不是false或null时使用嵌套样式。 |
| 3 | @为了
@for指令允许您在循环中生成样式。 |
| 4 | @每个
在@each指令中，定义了一个变量，其中包含列表中每个项目的值。 |
| 5 | @尽管
它采用 SassScript 表达式，直到语句计算结果为 false 为止，它会迭代输出嵌套样式。 |
Sass - Mixin 指令
Mixins 允许创建一组样式，这些样式可以在整个样式表中重复使用，而无需重新创建非语义类。在CSS中，mixin可以存储多个值或参数并调用函数；它有助于避免编写重复的代码。Mixin 名称可以互换使用下划线和连字符。以下是 Mixins 中存在的指令 -
| S. 编号 | 指令和说明 |
|---|---|
| 1 | 定义一个 Mixin
@mixin指令用于定义 mixin。 |
| 2 | 包括 Mixin
@include指令用于在文档中包含 mixin。 |
| 3 | 论点
SassScript 值可以作为 mixin 中的参数，当包含 mixin 时给出该值，并且可以在 mixin 中作为变量使用。 |
| 4 | 将内容块传递给 Mixin
样式块被传递到 mixin。 |
Sass - 函数指令
在本章中，我们将学习函数指令。在 SASS 中，您可以创建自己的函数并在脚本上下文中使用它们，或者可以与任何值一起使用。通过使用函数名称和任意参数来调用函数。
例子
以下示例演示了 SCSS 文件中函数指令的使用 -
函数指令.htm
<html>
<head>
<title>Nested Rules</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container" id = "set_width">
<h2>Example for Function directives</h2>
<p>SASS stands for Syntactically Awesome Stylesheet. </p>
</div>
</body>
</html>
接下来，创建文件style.scss。
样式.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文件 -
样式.css
#set_width {
padding-left: 95px;
}
输出
让我们执行以下步骤来看看上面给出的代码是如何工作的 -
将上面给出的 html 代码保存在function_directive.html文件中。
在浏览器中打开此 HTML 文件，输出如下所示。
在输出中，您可以看到正在应用左侧填充。
就像 mixin 一样，函数也可以访问全局定义的变量，也可以接受参数。您应该使用@return调用函数的返回值。我们可以通过使用关键字参数来调用SASS定义的函数。
调用上述函数如下所示。
#set_width { padding-left: adjust_width($n: 10); }
命名约定
为了避免命名冲突，可以为函数名称添加前缀，以便可以轻松区分它们。与 mixin 一样，用户定义的函数也支持变量参数。函数和其他 SASS 标识符可以互换使用下划线 (_) 和连字符 (-)。
例如，如果函数定义为adjustment_width，则它可以用作adjustment-width，反之亦然。
Sass - 输出样式
在本章中，我们将研究SASS 输出样式。SASS生成的CSS文件由默认的CSS样式组成，反映了文档的结构。默认的 CSS 样式很好，但可能并不适合所有情况；另一方面，SASS 支持许多其他样式。
它支持以下不同的输出样式 -
：嵌套
嵌套样式是SASS的默认样式。当您处理大型 CSS 文件时，这种样式设置方式非常有用。它使文件的结构更具可读性并且易于理解。每个属性都有自己的行，每个规则的缩进基于其嵌套深度。
例如，我们可以将代码嵌套在 SASS 文件中，如下所示 -
#first {
background-color: #00FFFF;
color: #C0C0C0;
}
#first p {
width: 10em;
}
.highlight {
text-decoration: underline;
font-size: 5em;
background-color: #FFFF00;
}
：扩大
在 CSS 样式的扩展类型中，每个属性和规则都有自己的行。与嵌套 CSS 样式相比，它需要更多空间。规则部分由属性组成，这些属性都在规则内，而规则不遵循任何缩进。
例如，我们可以扩展 SASS 文件中的代码，如下所示 -
#first {
background-color: #00FFFF;
color: #C0C0C0;
}
#first p {
width: 10em;
}
.highlight {
text-decoration: underline;
font-size: 5em;
background-color: #FFFF00;
}
：袖珍的
紧凑的 CSS 样式比 Expanded 和 Nested 占用的空间更少。它主要关注选择器而不是其属性。每个选择器占用一行，其属性也放在同一行。嵌套规则彼此相邻放置，没有换行符，单独的规则组之间将有换行符。
例如，我们可以压缩 SASS 文件中的代码，如下所示 -
#first {
background-color: #00FFFF; color: #C0C0C0;
}
#first p {
width: 10em;
}
.highlight {
text-decoration: underline; font-size: 5em; background-color: #FFFF00;
}
：压缩
与上面讨论的所有其他样式相比，压缩 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
在代码中您可以看到，函数声明指定了函数的参数名称。如果失败，那么即使该函数正在运行并且它也接受任意关键字参数，它也不会接受任何参数。您可以使用值访问器获取 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继承导入器。