使用 Sass

上一页
下一页

SASS 比 CSS 更强大、更稳定，通过扩展 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 框架，它使用 Web 标准（例如 JSON、HTML、CSS 和 JavaScript）来显示用户界面。要使用 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声明。

打印页面
上一页
下一页
广告