Sass 教程

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

Sass特色功能

  1. 完全兼容CSS3

  2. 在CSS基础上增加变量、嵌套、混合等功能

  3. 通过函数进行颜色值与属性的运算

  4. 提供控制指令等高级功能

  5. 自定义输出格式

Sass语法格式

Sass有两种语法格式。

一、SCSS(Sassy CSS),也是本教程中使用的格式。该格式仅在CSS3语法的基础上进行拓展,所有CSS3语法在SCSS中都是通用的,同时加入Sass的特殊功能。Sass也支持大多数CSS hacks写法已经浏览器前缀写法,以及早期的IE滤镜写法,这种格式以.scss作为拓展名。

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

任何一种格式可以直接 导入 (@import) 到另一种格式中使用,或者通过 sass-convert 命令行工具转换成另一种格式:

实例:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass


本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信