Sass学习之路——Sass简介

Posted 2020-08-22

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

 

[css] view plain copy

 

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

 

SCSS 语法

 

[css] view plain copy

 

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

 

编译出来的 CSS

[css] view plain copy

 

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

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