Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个 CSS 预处理器。 Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。 Sass 完全兼容所有版本的 CSS。 Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。 Sass 生成良好格式化的 CSS 代码,易于组织和维护。 Sass 文件后缀为 .scss。 Sass 实例 阅读本教程前,您需要了解的知识: 阅读本教程,您需要有以下基础: 为什么使用 Sass? CSS 本身语法不够强大,导致重复编写一些代码,无法实现复用,而且在代码也不方便维护。 Sass 引入合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。 我们可以举个例子,我们会在 CSS 中重复使用很多次十六进制的颜色代码,当有了变量之后,如果要改变颜色代码,只要修改变量的值就好了: Sass 实例 /* 定义颜色变量,要修改颜色值,修改这里就可以了 */$primary_1: #a2b9bc; $primary_2: #b2ad7f; $primary_3: #878f99;/* 使用变量 */.main-header { background-color: $primary_1; }.menu-left { background-color: $primary_2; }.menu-right { background-color: $primary_3; } Sass 是如何工作的? 浏览器并不支持 Sass 代码。因此,你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。 Sass 安装我们可以使用 npm(NPM 使用介绍)来安装 Sass。也可以使用 Windows 的包管理器 Chocolatey 来安装。具体安装方式可以参考 Sass 安装详细介绍 关于Sass具体的语法,可以参考下面的文章 |
|