SASS - 简介

---

• SASS – 简介
• SASS – 环境搭建
• SASS – 使用Sass程序
• SASS – SASS – 语法
• SASS – SASS – 变量
• SASS – 局部文件(Partial)
• SASS – 混合(Mixin)
• SASS – @extend（继承）指令
• SASS – 操作符
• SASS – 函数
• SASS – 输出格式

---

Sass是一种CSS扩展语言，它使CSS更加容易编写维护。Sass 是 Syntactically Awesome StyleSheets（语法很棒的样式表） 的缩写，对于有大量CSS代码的项目特别有用。

Sass的工作方式是，在Sass源文件中写代码，然后由Sass程序（Sass编译器/转译器）将其转换为CSS文件。

可以看出，这类似于c语言，开发者在c源文件中编写代码，然后由编译器生成可执行性文件。

image

所以你不会直接修改css文件，而是修改Sass源文件。

Sass代码与CSS代码相似，还多了一些东西，比如变量、混合符、数学运算符等等。

例如，可以定义一个颜色变量，在多个选择器中使用，避免了在多个选择器中重复写相同的颜色值，修改时只需修改变量值就可以了。

要使用Sass，先要安装Sass程序，Sass程序是一种编译器/转译器，主要作用是把sass编译为css，Sass程序运行在Ruby上，所以Ruby也需要安装。

SASS程序使用方式

SASS程序有3种使用方式：

• 作为命令行工具
• 作为独立的Ruby模块
• 作为任何Rack-enabled的框架(包括Ruby on Rails和Merb)的插件

编写SASS代码

Sass支持完整的CSS语法，以及一组名为SassScript的扩展。SassScript允许属性使用变量、算术和函数。SassScript可以用于任何属性值，还可以用来动态生成选择器和属性名。

Sass的优点

Sass的主要优点：

• 有助于保持大型样式表的良好组织
• 提供了对CSS的扩展，如变量、函数、嵌套和混合
• 帮助开发人员快速开发CSS