使用 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 ，则仅读取S​​ASS文件。
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 样式的源映射。它使用三个值 -

  • :auto - 它包含相对 URI。如果没有相对 URI，则使用“file:”URI。

  • :file - 它使用“file:”URI，在本地工作，而不是在远程服务器上。

  • :inline - 它包含源映射中的源文本，用于创建大型源映射文件。
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声明。