使用Sass (二）

淡淡的烟草味﹌ 2023-10-18 11:13 20阅读 0赞

查看文档： [https://www.sass.hk/docs/][https_www.sass.hk_docs]

## [Sass (Syntactically Awesome StyleSheets)][Sass _Syntactically Awesome StyleSheets] ##

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 [Compass][]）有助于更好地组织管理样式文件，以及更高效地开发项目。

### 1. 特色功能 (Features) ###

*  完全兼容 CSS3
 *  在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
 *  通过[函数][Link 1]进行颜色值与属性值的运算
 *  提供[控制指令 (control directives)][_control directives]等高级功能
 *  自定义输出格式

### 2. 语法格式 (Syntax) ###

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 `.scss` 作为拓展名。

另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 [the indented syntax reference][]。这种格式以 `.sass` 作为拓展名。

### 3. 使用 Sass (Using Sass) ###

Sass 可以通过以下三种方式使用：作为命令行工具；作为独立的 Ruby 模块 (Ruby module)；或者作为 Rack-enabled 框架的插件（例如 Ruby on Rails 与 Merb）。无论哪种方式都需要先安装 Sass gem （Windows 系统需要先[安装 Ruby][Ruby]）

源文件:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

(1) 在命令行中运行 Sass：

sass my.scss my.css

编译之后就会生成2个文件:

![20181114134256322.png][]

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

![20181114134359157.png][]

添加一行样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

在my.css中也发生变化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

(3)监视整个文件夹： css 是空文件夹

![20181114135231682.png][]

将SCSS文件夹中的.css文件写入到 css 文件夹中

![20181114135301969.png][]

执行后就出现如下所示:

![20181114135544460.png][]

4、 HBuilder 配置 Sass/Scss 自动编译

![20181114135720613.png][]

打开窗口 |新建

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][]

命令参数：--no-cache %FileName% %FileBaseName%.css

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4][]

**测试**

编写zhang.scss就会自动编译成两个文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5][]

[https_www.sass.hk_docs]: https://www.sass.hk/docs/
[Sass _Syntactically Awesome StyleSheets]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html
[Compass]: http://compass-style.org/
[Link 1]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
[_control directives]: https://www.sass.hk/docs/#t8
[the indented syntax reference]: http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html
[Ruby]: http://rubyinstaller.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181114134237613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20181114134256322.png]: https://img-blog.csdnimg.cn/20181114134256322.png
[20181114134359157.png]: https://img-blog.csdnimg.cn/20181114134359157.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181114134457867.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181114134511884.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20181114135231682.png]: https://img-blog.csdnimg.cn/20181114135231682.png
[20181114135301969.png]: https://img-blog.csdnimg.cn/20181114135301969.png
[20181114135544460.png]: https://img-blog.csdnimg.cn/20181114135544460.png
[20181114135720613.png]: https://img-blog.csdnimg.cn/20181114135720613.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20181114135734898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2018111413574515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20181114135934817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70