技术头条(投递你的文章)     搜索本站     邮件订阅     微信号:IT技术博客大学习
您现在的位置首页 --> CSS/HTML --> 使用 Sass (Using Sass)-插件,缓存,配置选项,语法选择及编码格式

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

浏览:145次  出处信息
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
所有相关的选项也可通过标记在sassscss命令行可执行文件中使用。可用选项有:

选项描述
: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_pathsSASS_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技术博客大学习
作者微博
© 2009 - 2017 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号