在项目中如何使唤scss

在项目中如何使唤scss?

一． sass的三种使唤方式

1. 作为命令行工具

1. 在命令行中运行 Sass：

sass input_name.scss:output_name.css

其中input_name.scss是我们要转化的scss文件名，output_name.css 是我们要输出的css文件名及相应的路径，但是例子中的路径默认为当前路径。

大家有没有觉得每次这样会特别麻烦呢？聪（lan）明(duo)的同学们可能就会思考了，可不可以编译一下，以后能够自动检测改变，并实现转化呢？当然有啦，不过专业术语叫做监视，下面我们来看看下面的实现方式：

2. 监视单个sass 文件，每次修改并保存时自动编译：

sass --watch input_name.scss:output_name.css

3. 监视整个文件夹：

sass --watch app/sass:public/stylesheets

NOTE:

1. 其中watch就是一个监视参数，我们可以时刻监控着scss文件的改变。

2. 更多命令的用法我们可以通过 sass --help 获取帮助信息。

2. 作为独立的 Ruby 模块(Ruby module)

1. Sass gem 安装完毕后,运行如下代码：

require "sass"

2. 按照下面的代码，使用Sass::Engine：

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)

engine.render #=> "#main { background-color: #0000ff; }\n"

3. 作为 Rack-enabled 框架的插件（例如Ruby on Rails 与Merb）

1. 在 Rails 3 之前的版本中使用Sass，需要在environment.rb 文件中添加：

config.gem "sass"

2. Rails 3 则需要在Gemfile 中添加：

gem "sass"

3. 在 Merb 中使用Sass，需要在config/dependencies.rb 文件中添加：

dependency "merb-haml"

4. 在 Rack 中使用Sass，需要在config.ru 中添加：

require 'sass/plugin/rack'

use Sass::Plugin::Rack

NOTE:

样式文件与 views 不同，不包含任何动态内容，因此CSS 只需要在Sass 文件被修改后再编译生成。

默认情况下 .sass 与 .scss 文件放置在 public/stylesheets/sass路径中（我们可以通过:template_location参数来修改默认存放的路径），编译生成的 CSS 文件放置在public/stylesheets 中。例如 public/stylesheets/sass/main.scss 编译生成 public/stylesheets/main.css。

NOTE：无论上述的哪种方式都需要先安装 Sass gem才可以哦。（Windows 系统需要先安装 Ruby）

其中安装sass gem 的代码如下：

gem install sass

二．缓存

在默认情况下，我们的sass会自动缓存编译后的模板与partials，因为这样做能够显著提升重新编译的速度，尤其在处理由 @import 导入多个子文件的大型项目时。

在我们单独使用 sass的时候，缓存内容保存在 .sass-cache 文件夹中。在 Rails 和Merb 项目中缓存文件保存在tmp/sass-cache 文件夹中，我们可通过:cache_location修改路径缓存文件的缓存路径。

NOTE：禁用缓存可将 :cache 设为 false。

三．判断语法格式

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

四．编码格式

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

与 CSS 相同，使用@charset 可以声明特定的编码格式。在样式文件的起始位置（也就是说前面要没有任何空白与注释哦！）插入 @charset "encoding-name"， Sass 将会按照给出的编码格式编译文件。

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

NOTE: 大家一定要注意所使用的编码格式必须要是可以转换为 Unicode 字符集。

本文由源码时代老师原创提供