CSS预处理器Sass详解

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

1. 特色功能

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

文件后缀名称：sass有两种后缀名文件，一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

2. Sass、Less语法比较

2.1 Sass与Less不同之处

编译环境不一样——Sass基于Ruby等服务器端环境编译,Less既可以支持服务器端编译也可在客户端（浏览器环境）编译 变量符不一样——Sass使用$符号声明变量，Less使用@符号声明变量 对于条件语句的支持不一样——Sass支持复杂的条件语句（类似于if..else..），Less仅支持简单的条件语句(类似于if()..) 作用域——Sass局部修改变量可影响全局变量，Less则只会在局部作用域生效。 引用外部CSS文件方式不同——Sass默认引入.sass或.scss文件时可忽略后缀，Less则需要通过关键字配置来控制引入文件如何处理。

2.2 Sass与Less相似的地方

混入(Mixins)——类似于函数或者宏，并且可以传递参数； 嵌套规则——class中嵌套class，从而减少重复的代码； 运算——CSS中运用加减乘除计算各种数值以及字符串等； 颜色功能——可以通过内置函数编辑颜色； 命名空间(namespace)——分组样式，从而可以被调用；
 

3. Sass语法主要功能介绍

3.1 CSS功能扩展

嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理，例如：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表