028-86261949

当前位置:首页 > 技术交流 > 在项目中如何使唤scss?

在项目中如何使唤scss?

2018/06/29 14:36 分类: 技术交流 浏览:47

上一篇文章我们见识了scss的魅力之处,如此有魅力的工具,我们要如何收为己用呢?

现在我们来看看我们怎么来使唤sass吧!
 
一. 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。

 

三. 判断语法格式
上一篇文章我们讲述过scss与sass的区别,直观的讲其实就是二者版本不一样。而我们的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 字符集。

 

    感谢源码时代教学讲师提供此文章!
    本文为原创文章,转载请注明出处!
#标签:使唤scss,源码时代