当前位置:首页>CSS>Sass>Sass使用

Sass使用

作者:微学网发布时间:2019-09-03 09:00:00

Sass三种使用方式

Sass 可以通过以下三种方式使用:

  • 作为命令行工具

  • 作为独立的 Ruby 模块 (Ruby module)

  • 作为 Rack-enabled 框架的插件(例如 Ruby on Rails 与 Merb)

无论哪种方式都需要先安装 Sass gemWindows 系统需要先安装 Ruby):

gem install sass

在命令行中运行 Sass

sass input.scss output.css

监视单个 Sass 文件,每次修改并保存时自动编译:

sass --watch input.scss:output.css

监视整个文件夹:

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

样式文件与 views 不同,不包含任何动态内容,因此 CSS 只需要在 Sass 文件被修改后再编译生成。默认情况下 .sass.scss 文件放置在 public/stylesheets/sass 中(可通过 :template_location 修改路径),编译生成的 CSS 文件放置在 public/stylesheets 中。例如 public/stylesheets/sass/main.scss 编译生成 public/stylesheets/main.css

缓存 (Caching)

Sass 自动缓存编译后的模板与 partials,这样做能够显著提升重新编译的速度,尤其在处理由 @import 导入多个子文件的大型项目时。

单独使用 Sass,缓存内容保存在 .sass-cache 文件夹中。在 RailsMerb 项目中缓存文件保存在 tmp/sass-cache 文件夹中(可通过 :cache_location 修改路径)。禁用缓存可将 :cache 设为 false。

配置选项 (Options)

可以通过在environment.rbin Railsconfig.ruin Rack中设置{Sass :: Plugin :: Configuration#options Sass :: Plugin#options}哈希来设置选项…

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

…或者通过在init.rbin Merb中设置Merb :: Plugin.config [:sass] hash…

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

…或者通过将选项哈希传递给{Sass :: Engine#initialize}。 所有相关选项也可通过sassand scsscommand-line可执行文件的标志获得。 可用选项包括:

  • {#style-option}:style
    设置CSS输出的样式。 请参阅输出样式。

  • {#syntax-option}:syntax
    输入文件的语法,:sassfor indented语法和:scssfor CSS-extension语法。这仅在您自己构建{Sass :: Engine}实例时有用;使用{Sass :: Plugin}时,它会自动正确设置。默认为:sass。

  • {#property_syntax-option}:property_syntax
    强制缩进语法文档对属性使用一种语法。如果未使用正确的语法,则会引发错误。 :newforces在属性名称后使用冒号。例如:color:#0f3或width:$ main_width。 :oldforces在属性名称之前使用冒号。例如:: color#0f3或:width $ main_width。默认情况下,任一语法都有效。这对SCSS文档没有影响。

  • {#cache-option}:cache
    是否应该缓存已解析的Sass文件,从而提高速度。默认为true。

  • {#read_cache-option}:read_cache
    如果设置为:cacheis not,则仅读取Sass缓存(如果存在),如果不存在则不写入。

  • {#cache_store-option}:cache_store
    如果将其设置为{Sass :: CacheStores :: Base}的子类的实例,则该缓存存储将用于存储和检索缓存的编译结果。默认为使用:cache_locationoption初始化的{Sass :: CacheStores :: Filesystem}。

  • {#never_update-option}:never_update
    即使模板文件发生更改,是否永远不应更新CSS文件。将此设置为true可能会带来很小的性能提升。它总是默认为false。只在Rack,Ruby on Rails或Merb中有意义。

  • {#always_update-option}:always_update
    每次访问控制器时是否应更新CSS文件,而不是仅在模板被修改时更新。默认为false。只在Rack,Ruby on Rails或Merb中有意义。

  • {#always_check-option}:always_check
    每次访问控制器时是否应检查Sass模板的更新,而不是仅在服务器启动时检查。如果Sass模板已更新,它将被重新编译并覆盖相应的CSS文件。在生产模式下默认为false,否则为true。只在Rack,Ruby on Rails或Merb中有意义。

  • {#prow-option}:poll
    如果为true,则始终使用{Sass :: Plugin :: Compiler#watch}的轮询后端而不是本机文件系统后端。

  • {#full_exception-option}:full_exception
    Sass代码中的错误是否应该导致Sass在生成的CSS文件中提供详细描述。如果设置为true,则错误将与行号和源代码段一起显示为CSS文件中的注释和页面顶部(在支持的浏览器中)。否则,Ruby代码中将引发异常。在生产模式下默认为false,否则为true。只在Rack,Ruby on Rails或Merb中有意义。

  • {#template_location-option}:template_location
    应用程序的根sass模板目录的路径。如果散列:css_location被忽略,则此选项指定输入和输出目录之间的映射。也可以给出一个2元素列表的列表,而不是散列。默认为css_location +“/ sass”。只在Rack,Ruby on Rails或Merb中有意义。请注意,如果指定了多个模板位置,则所有模板位置都将放置在导入路径中,允许您在它们之间导入。请注意,由于可以采用许多可能的格式,因此只能直接设置此选项,不能访问或修改此选项。使用{Sass :: Plugin :: Configuration#template_location_array Sass :: Plugin#template_location_array}
    {Sass :: Plugin :: Configuration#add_template_location Sass :: Plugin #add_template_location}{Sass :: Plugin :: Configuration#remove_template_location Sass ::插件#lele_template_location}方法。

  • {#css_location-option}:css_location
    应该写入CSS输出的路径。在以下情况下忽略此选项:template_location是哈希。默认为“./public/stylesheets”。只在Rack,Ruby on Rails或Merb中有意义。

  • {#cache_location-option}:cache_location
    应该将缓存的sasscfiles写入的路径。默认为“./tmp/sass-cache”在Rails和Merb中,或者./.sass-cache"otherwise。如果设置了:cache_storeoption,则忽略该值。

  • {#unix_newlines-option}:unix_newlines
    如果为true,则在编写文件时使用Unix风格的换行符。只有在Windows上有意义,并且只有当Sass正在编写文件时(在Rack,Rails或Merb中,直接使用{Sass :: Plugin}时,或者在使用命令行可执行文件时)。

  • {#filename-option}:filename
    正在呈现的文件的文件名。这仅用于报告错误,并在使用Rack,Rails或Merb时自动设置。
    {#line-option}:line:Sass模板第一行的编号。用于报告错误的行号。如果Sass模板嵌入在Ruby文件中,这很有用。

  • {#load_paths-option}:load_paths
    应搜索使用@importdirective导入的Sass模板的文件系统路径或导入器数组。这些可能是{Sass :: Importers :: Base}的字符串,Pathnameobjects或子类。这默认为工作目录,在Rack,Rails或Merb中,无论如何:template_locationis。负载路径也由{Sass.load_paths}SASS_PATH环境变量通知。

  • {#systemystem_importer-option}:filesystem_importer
    用于处理普通字符串加载路径的{Sass :: Importers :: Base}子类。这应该从文件系统导入文件。它应该是一个继承自{Sass :: Importers :: Base}的Class对象,其构造函数采用单个字符串参数(加载路径)。默认为{Sass :: Importers :: Filesystem}

  • {#line_numbers-option}:line_numbers
    设置为true时,会将定义选择器的行号和文件作为注释发送到编译的CSS中。用于调试,尤其是在使用import和mixins时。也可以调用此选项:line_comments。使用:compressedoutput样式或:debug_info /:trace_selectorsoptions时自动禁用。

  • {#trace_selectors-option}:trace_selectors
    设置为true时,在每个选择器之前发出完整的导入跟踪和mixins。这对于样式表导入和mixin包含的浏览器内调试很有帮助。此选项取代:line_commentsoption,并被:debug_infooption取代。使用:compressedoutput样式时自动禁用。

  • {#spin_info-option}:debug_info
    当设置为true时,导致定义选择器的行号和文件以浏览器可以理解的格式发送到编译的CSS中。与FireSass Firebug扩展一起使用,用于显示Sass文件名和行号。使用:compressedoutput样式时自动禁用。

  • {#custom-option}:custom
    一个选项,可供各个应用程序设置,使数据可用于{Sass :: Script :: Functions自定义Sass函数}。

  • {#snilent-option}:quiet
    设置为true时,会导致警告被禁用。

判断语法格式 (Syntax Selection)

Sass 命令行工具根据文件的拓展名判断所使用的语法格式,没有文件名时 sass 命令默认编译 .sass 文件,添加 --scss 选项或者使用 scss 命令编译 SCSS 文件。

编码格式 (Encodings)

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

CSS 相同,使用 @charset 可以声明特定的编码格式。在样式文件的起始位置(前面没有任何空白与注释)插入 @charset "encoding-name", Sass 将会按照给出的编码格式编译文件。注意所使用的编码格式必须可转换为 Unicode 字符集。

SassUTF-8 编码输出 CSS 文件,当且仅当编译后的文件中包含非 ASCII 字符时,才会在输出文件中添加 @charset 声明,而在压缩模式下 (compressed mode) 使用 UTF-8 byte order mark 代替 @charset 声明语句。