将scss收为己使用,如何使唤scss?

作者 : 开心源码 本文共2151个字,预计阅读时间需要6分钟 发布时间: 2022-05-11 共91人阅读

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

现在我们来看看我们怎样来使唤sass吧!

一.sass的三种使唤方式

1.作为命令行工具

1.在命令行中运行 Sass:

sassinput_name.scss:output_name.css

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

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

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

sass–watchinput_name.scss:output_name.css

3.监视整个文件夹:

sass–watchapp/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'

useSass::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的代码如下:

geminstallsass

二.缓存

在默认情况下,我们的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收为己使用,如何使唤scss?

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 将scss收为己使用,如何使唤scss?

发表回复