Sass学习之路(1)——Sass简介

时间:2021-12-10 14:45:40

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 语法

  1. $font-stack: Helvetica, sans-serif  //定义变量
  2. $primary-color: #333 //定义变量
  3. body
  4. font: 100% $font-stack
  5. color: $primary-color

SCSS 语法

  1. $font-stack: Helvetica, sans-serif;
  2. $primary-color: #333;
  3. body {
  4. font: 100% $font-stack;
  5. color: $primary-color;
  6. }

编译出来的 CSS

  1. body {
  2. font: 100% Helvetica, sans-serif;
  3. color: #333;
  4. }

其实SCSS语法便是Sass后续推出的新版本语法,可以理解成一种语法糖,不再沿用ruby的语法习惯。(熟悉的大括号和封号又回归了)。