> 웹 프론트엔드 > HTML 튜토리얼 > 使用 Sass (Using Sass)-插件,缓存,配置选项,语法选择及编码格式_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-21 08:54:25
원래의
1245명이 탐색했습니다.

翻译自官方文档: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

Sass 有三种使用方式:作为命令行工具,作为独立的 Ruby 模块 (Ruby module),或者作为 Rack-enabled 框架的插件,包括 Ruby on Rails 与 Merb。无论使用哪种方式都需要首先安装 Sass gem :

gem install sass
로그인 후 복사

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

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

sass input.scss output.css
로그인 후 복사

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

sass --watch input.scss:output.css
로그인 후 복사

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

sass --watch app/sass:public/stylesheets
로그인 후 복사

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

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

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)engine.render #=> "#main { background-color: #0000ff; }\n"
로그인 후 복사

Rack/Rails/Merb 插件(Plugin)

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

config.gem "sass"
로그인 후 복사

对于 Rails 3,则是把这一行加到 Gemfile 中:

gem "sass"
로그인 후 복사

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

dependency "merb-haml"
로그인 후 복사

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

require 'sass/plugin/rack'use Sass::Plugin::Rack
로그인 후 복사

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

缓存 (Caching)

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

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

配置选项 (Options)

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

Sass::Plugin.options[:style] = :compact
로그인 후 복사

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

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,初始化使用。
:never_update CSS文件永远不应该被更新,即使是模板(template)文件改变。将其设置为 true可能会带来小的性能提升。它总是默认为 false。该选项只有在Rack,Ruby on Rails,或Merb中有意义。
:always_update CSS文件总是应该进行更新,即使是在每一个控制器被访问时,而不是只当模板被修改时更新。默认为 false。该选项只有在Rack,Ruby on Rails,或Merb中有意义。
:always_check Sass模板总是应该被检查是否更新,即使是在每一个控制器被访问时,而不是只在服务启动时。如果一个Sass模板(template)被更新,它会被重新编译并且覆盖相应的CSS文件。在生产模式中默认为 false,否则 true。该选项只有在Rack,Ruby on Rails,或Merb中有意义。
:poll 如果为 true,始终使用 Sass::Plugin::Compiler#watch后端轮询而不是本机文件系统的后端。
:full_exception Sass代码中错误是否应该在生成的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_location CSS文件输出的路径,当 :template_location选项为一个散列(hash)时,这个选项将被忽略。默认设置为 "./public/stylesheets"。该选项只有在Rack,Ruby on Rails,或Merb中有意义。
:cache_location 其中,高速缓存 sassc文件应写入的路径。在Rails和Merb中默认为 "./tmp/sass-cache",否则默认为 "./.sass-cache"。如果设置了,这个将被忽略。
:unix_newlines 如果为true,写入文件时使用Unix风格的换行符。只有在Windows上,并且只有当Sass被写入文件时有意义(在 Rack, Rails, 或 Merb中,直接使用 Sass::Plugin时,或者使用命令行可执行文件时)。
:filename 被渲染文件的文件名。这完全是用于报告错误,使用Rack, Rails, or Merb时自动设置。
:line Sass模板(template)第一行的行号。用于报告错误的行号。如果Sass模板(template)嵌入一个Ruby文件中,这个设置是很有用的。
:load_paths 一个数组,包含文件系统 或 通过指令导入的 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中。这对调试来说是有用的,特别是使用和的时候。这个选项有个别名叫做 :line_comments。当使用 :compressed输出样式或使用 :debug_info/ :trace_selectors选项时这个选项将自动禁用。
:trace_selectors 当设置为 true的时候,将在每个选择器之前注入和的完整轨迹。在浏览器中调试通过和包含进来的样式表时是很有用的。此选项将取代 :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 声明语句。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿