Sass定义
CSS 预处理器定义的一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
官方Sass描述
Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。
Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;)
例如:Sass 语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
编译出来的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Sass有新旧语法的区分
- 最初的语法,用Tab键严格控制缩进,不带任何大括号和分号,文件以“.Sass”为扩展名
- SCSS 是 Sass 的新语法格式,代码都包裹在一对大括号里,并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。
在HTML中引入的样式文件还是css文件,Sass只作为css的预处理工具,因此需要Sass编译
多种Sass编译方式:
- 命令编译
- GUI工具编译
- 自动化编译
Sass 中样式风格
每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格:
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed