Categories: Sass教程

Sass：使用Sass

SASS更加强大和稳定，它通过使用CSS扩展为基本语言提供了强大的功能。您可以通过三种不同的方式使用SASS：

作为命令行工具
作为Ruby模块
作为Rack enable Framework的插件

如果您在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 Plugin

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

您可以使用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应用程序中启用SASS ，请将以下行添加到config.ru文件中，该文件位于应用程序的根目录中。

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

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

您可以通过在config / dependencies.rb文件中添加以下行来在Merb中启用SASS ：

dependency "merb-haml"

Caching

SASS缓存文档，例如模板和部分文档，除非已更改，否则无需解析它们就可以重用它们。当模板分为单独的文件时，它可以更快地编译SASS文件，甚至可以更好地工作，这些文件均被导入一个大文件中。如果删除缓存的文件，则下次编译时将再次生成它们。

选件Options

您可以使用以下行在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 它使用缩进语法来利用属性。如果不正确，则将引发错误。例如，考虑“背景：＃F5F5F5”，其中背景是属性名称，而＃F5F5F5是其属性值。在属性名称后必须使用冒号。
4	:cache 它可以加快SASS文件的编译速度。默认情况下设置为true。
5	:read_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 通过将Sass :: Plugin :: Compiler＃watch（监视CSS文件的模板和更新）使用轮询后端，将其设置为true。
11	:full_exception 每当生成的CSS文件中的SASS代码中发生异常时，它将显示错误描述。它显示行号，其中发生错误以及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来禁用警告。