技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> 使用 Sass (Using Sass)-插件，缓存，配置选项，语法选择及编码格式

使用 Sass (Using Sass)-插件，缓存，配置选项，语法选择及编码格式

浏览:900次  出处信息
翻译自官方文档：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass
Sass 有三种使用方式：作为命令行工具，作为独立的 Ruby 模块 (Ruby module)，或者作为 Rack-enabled 框架的插件，包括 Ruby on Rails 与 Merb。无论使用哪种方式都需要首先安装 Sass gem ：
  1. gem install sass

如果你使用的是Windows ，你可能首先需要安装Ruby 。

如果要在命令行中运行 Sass ,只要使用

  1. sass input.scss output.css

你还可以使用Sass命令来监视某个Sass文件的改动，并自动编译来更新 CSS ：

  1. sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件，你也可以使用Sass命令来监视整个目录：

  1. sass --watch app/sass:public/stylesheets

使用 sass --help 可以列出完整的帮助文档。

在 Ruby 中使用 Sass 也非常容易，Sass gem 安装完毕后，用它运行 require "sass"， 然后按照下面的方法使用 Sass::Engine：

  1. engine =Sass::Engine.new("#main {background-color: #0000ff}",:syntax =>:scss)
  2. engine.render #=>"#main { background-color: #0000ff; }\n"

Rack/Rails/Merb 插件（Plugin）

在 Rails 3 之前的版本中启用 Sass，需要在 environment.rb 文件中添加一行代码：

  1. config.gem "sass"

对于 Rails 3，则是把这一行加到 Gemfile 中：

  1. gem "sass"

要在 Merb 中启用 Sass，需要在 config/dependencies.rb 文件中添加一行代码：

  1. dependency "merb-haml"

在 Rack 应用中启用 Sass，需要在 config.ru 文件中添加以下代码：

  1. require 'sass/plugin/rack'
  2. use Sass::Plugin::Rack

Sass 样式表跟视图（views）的工作方式不同。 它不包含任何动态内容， 因此只需要在 Sass 文件更新时生成 CSS 即可。 默认情况下，.sass 和 .scss 文件是放在 public/stylesheets/sass 目录下的（这可以通过 :template_location 选项进行配置）。 然后，在需要的时候，它们会被编译成相应的 CSS 文件并被放到 public/stylesheets 目录下。 例如，public/stylesheets/sass/main.scss 文件将会被编译为 public/stylesheets/main.css 文件。

缓存 (Caching)

默认情况下，Sass 会自动缓存编译后的模板（template）与 partials，这样做能够显著提升重新编译的速度，在处理 Sass 模板被切割为多个文件并通过 @import 导入，形成一个大文件时效果尤其显著。

如果不使用框架的情况下，Sass 将会把缓存的模板放入 .sass-cache 目录。 在 Rails 和 Merb 中，缓存的模板将被放到tmp/sass-cache 目录。 此目录可以通过:cache_location 选项进行自定义。 如果你不希望 Sass 启用缓存功能， 可以将 :cache 选项设置为 false。

配置选项 (Options)

选项可以通过设置的Sass::Plugin#options hash，具体设置在Rails中的environment.rb或者Rack中的config.ru的文件中：

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

或者，如果你使用Merb，那么可以在init.rb文件中设置Merb::Plugin.config[:sass] hash ：

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

或者通过传递一个选项 (options) hash 给Sass::Engine#initialize，
所有相关的选项也可通过标记在sass 和 scss命令行可执行文件中使用。可用选项有：

选项描述
:style设置输出CSS的代码风格，可以查看输出的代码风格。
:syntax输入文件的语法，:sass 表示缩进语法，:scss表示CSS扩展语法。只有在你自己构造Sass::Engine 实例的情况下有用；当你使用 Sass::Plugin时，它会自动设置正确的值。默认设置为 :sass 。
:property_syntax强制缩进语法文档使用一个属性语法。如果不使用正确的语法，将抛出一个错误。:new值表示强制在属性名后面使用一个冒号。例如：color: #0f3或者 width: $main_width 。 :old值表示强制在属性名前面使用一个冒号。例如：:color #0f3 或者 :width $main_width。默认请客下，两种语法都是有效的。该选项对于SCSS（.scss）文档是无效的。
:cache解析 Sass 时是否应该缓存，允许更快的编译速度。默认设置为 true 。
:read_cache如果设置了这个选项，而没有设置:cache选项，那么缓存存在就只读 Sass 缓存，如果没有没有缓存，那就不会编译。
:cache_store如果该选项设置为 Sass::CacheStores::Base 的子类的实例，该缓存存储将被用于存储和检索缓存编译结果。默认设置为Sass::CacheStores::Filesystem，初始化使用:cache_location 选项。
:never_updateCSS文件永远不应该被更新，即使是模板（template）文件改变。将其设置为true可能会带来小的性能提升。它总是默认为false。该选项只有在Rack，Ruby on Rails，或Merb中有意义。
:always_updateCSS文件总是应该进行更新，即使是在每一个控制器被访问时，而不是只当模板被修改时更新。默认为false。该选项只有在Rack，Ruby on Rails，或Merb中有意义。
:always_checkSass模板总是应该被检查是否更新，即使是在每一个控制器被访问时，而不是只在服务启动时。如果一个Sass模板（template）被更新，它会被重新编译并且覆盖相应的CSS文件。在生产模式中默认为false，否则true。该选项只有在Rack，Ruby on Rails，或Merb中有意义。
:poll如果为true，始终使用Sass::Plugin::Compiler#watch后端轮询而不是本机文件系统的后端。
:full_exceptionSass代码中错误是否应该在生成的CSS文件中提供详细的说明。如果设置为true，这个错误将显示在CSS文件的注释中 和页面顶部（支持的浏览器），错误内容包括行号和源代码片段。 否则，异常将在Ruby代码中提醒。在生产模式中默认为false，否则true。
:template_location一个路径，应用根目录中Sass模板（template）的目录。如果散列，:css_location 将被忽略，并且这个选项指定输入和输出目录之间的映射。也可以给定二元列表，代替散列（hash）。默认为css_location + "/sass"。该选项只有在Rack，Ruby on Rails，或Merb中有意义。请注意，如果指定了多个模板位置，它们全部都放置在导入路径中，允许你在它们之间进行导入。
需要注意的是，由于它可以采用许多可能的格式，这个选项应该只直接设置，不应该被访问或修改。使用Sass::Plugin#template_location_array，
Sass::Plugin#add_template_location，
Sass::Plugin#remove_template_location方法来代替。
:css_locationCSS文件输出的路径，当:template_location选项为一个散列（hash）时，这个选项将被忽略。默认设置为"./public/stylesheets"。该选项只有在Rack，Ruby on Rails，或Merb中有意义。
:cache_location其中，高速缓存sassc 文件应写入的路径。在Rails和Merb中默认为"./tmp/sass-cache"，否则默认为"./.sass-cache" 。如果设置了:cache_store 选项，这个将被忽略。
:unix_newlines如果为true，写入文件时使用Unix风格的换行符。只有在Windows上，并且只有当Sass被写入文件时有意义（在 Rack, Rails, 或 Merb中，直接使用Sass::Plugin时，或者使用命令行可执行文件时）。
:filename被渲染文件的文件名。这完全是用于报告错误，使用Rack, Rails, or Merb时自动设置。
:lineSass模板（template）第一行的行号。用于报告错误的行号。如果Sass模板（template）嵌入一个Ruby文件中，这个设置是很有用的。
:load_paths一个数组，包含文件系统 或 通过@import指令导入的 Sass模板（template）路径。他们可能是字符串， Pathname （路径名）对象或者是Sass::Importers::Base的子类。该选项默认为工作目录，并且在Rack, Rails, 或 Merb中，该选项无论如何值都是:template_location。加载路径也可以由Sass.load_paths和 SASS_PATH 环境变量通知。
:filesystem_importer一个Sass::Importers::Base的子类，用来处理普通字符串的加载路径。这应该从文件系统导入文件。这应该是一个通过构造函数带一个字符串参数（加载路径），继承自Sass::Importers::Base的Class对象。默认为Sass::Importers::Filesystem。
:sourcemap控制如何生产sourcemap。这些sourcemaps告诉浏览器如何找到Sass样式，从而生成每一个CSS样式。该选项有三个有效值：:auto在可能的情况下使用相对URI，假设在你使用的任何服务器上提供的源样式，那么它们的相对位置将和本地文件系统是相同的。如果一个相对URI不可用，那么将被”file:”替换。:file总是使用”file:” URI，这将在本地工作，但不能被部署到一个远程服务器。 :inline包含sourcemap中完整的源文本，这是最方便的，但是可能生产非常大的sourcemap文件。 最后，:none 会导致总是不会生成sourcemap文件。
:line_numbers当设置为true的时候，定义的选择器的行号和文件名 将被作为注释注入到编译的CSS中。这对调试来说是有用的，特别是使用@import和@mixin的时候。这个选项有个别名叫做:line_comments。当使用 :compressed输出样式或使用:debug_info/:trace_selectors选项时这个选项将自动禁用。
:trace_selectors当设置为true的时候，将在每个选择器之前注入@import和@mixin的完整轨迹。在浏览器中调试通过@import和@mixin包含进来的样式表时是很有用的。此选项将取代 :line_comments 选项，并且被:debug_info选项取代。当使用 :compressed输出样式时，这个选项将自动禁用。
:debug_info当设置为true的时候，定义的选择器的行号和文件名 将被注入到编译后的CSS中,可以被浏览器所识别。用于FireSass Firebug 扩展，以显示Sass文件名和行号。当使用 :compressed输出样式时，这个选项将自动禁用。
:custom这个选项可用于单个应用程序设置以使数据可用于定制Sass功能。
:quiet当设置为true的时候，导致禁用警告信息。

语法选择（Syntax Selection）

Sass命令行工具将使用文件扩展名以确定你使用的是哪种语法，但并不总是一个文件名。sass命令行程序默认为缩进语法，但如果输入应该被解析为SCSS语法，你可以传递--scss选项给她。此外，你可以使用scss命令行程序，它和sass程序完全一样，但是他的默认语法为SCSS。

编码格式 (Encodings)

在 Ruby 1.9 及以上环境中运行 Sass 时，Sass 对文件的编码格式比较敏感，首先会根据 CSS spec 判断样式文件的编码格式， 如果失败则检测 Ruby 字符串编码。也就是说，Sass 首先检查 Unicode 字节顺序标记，然后是 @charset 声明，最后是 Ruby 字符串编码，假如都没有检测到，默认使用 UTF-8 编码。

要明确指定样式表的编码，与 CSS 相同，使用@charset声明。在样式文件的起始位置（前面没有任何空白与注释）插入 @charset "encoding-name";， Sass 将会按照给定的编码格式编译文件。注意，无论你使用哪种编码，它必须可以转换为 Unicode 字符集。

默认情况下，Sass 总会以UTF-8编码输出 CSS 文件。当且仅当输出文件包含非ASCII字符时，才会在输出文件中添加 @charset 声明，在压缩模式中，而在压缩模式下 (compressed mode) 使用 UTF-8字节顺序标记代替 @charset 声明语句。

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：用CSS代码写出的各种形状图形的方法
后一篇：12个很少被人知道的CSS事实 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1