Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件,以及更高效地开发项目。
1、特色功能
- 完全兼容 CSS3
- 在CSS基础上增加变量、嵌套(nesting)、混合(mixins)等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令(control directives)等高级功能
- 自定义输出格式
2. 语法格式
Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。这种格式以.scss 作为拓展名。
3、变量声明
变量以美元符号开头,赋值方法与 CSS 属性的写法一样:
$width: 5em;
直接使用即调用变量:
#main {
width: $width;
}
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量