Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。
那么什么是CSS预处理器?
CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
换言之就是说,CSS预处理器是一种专门的变成语言,在通过这种语言编写之后,再将其编译成正常的CSS文件。
CSS预处理器给CSS增加了编程的特性,例如可以使用变量、函数、以及逻辑。
CSS预处理器的优势:
可以让你的CSS变得更加简洁,适应性,可读性都变得更好,同时代码的维护也变得更方便。
关于Sass:
引用一段Sass官网上的描述:
Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通CSS更加强大的功能。 Sass能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。
Sass是最早的CSS预处理语言,诞生于2007年,采用Ruby语言编写。比LESS的功能更加强大,不过早期的缩进式语法(Sass的老版本语法,抛弃CSS的封号,大括号等符号)无法被大众接受(无法想象没有大括号的CSS的世界)。
虽然像html一样的缩进式风格可以缩减代码量,强制规范的变成风格,但是大部分的前端工程师都难以接受没有花括号的世界,倒是Sass早起没有LESS普及。
Sass和SCSS:
其实Sass和SCSS是同一种东西,平时都被我们称之为SCSS,不过还是一些区别:
1.文件拓展名不同,拓展名分别是".sass"和".scss"。
2.语法书写方式不同:Sass使用严格的缩进式语法书写,不使用大括号和封号(换行解决一切问题)。而SCSS更接近我们平时书写CSS的方式。
下边是两种语法的示例:
Sass 语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
SCSS 语法
$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;
}
其实SCSS语法便是Sass后续推出的新版本语法,可以理解成一种语法糖,不再沿用ruby的语法习惯。(熟悉的大括号和封号又回归了)。