Sass 常见面试题与核心基础知识梳理

Sass 的诞生

众所周知 css 并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。

为了解决 css 的不足，开发者们想到了编写一种对 css 进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成 css 供浏览识别，这样既一定程度上弥补了 css 的不足，也无需一种新的语言来代替 css 以供浏览器识别。

于是 css 预处理语言 SASS 就应运而生了。它诞生于 2007 年，是最早成熟css预处理语言。

1、什么是 Sass ？

why

Sass 是 css 的预处理器，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。

Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表，有助于更好地组织管理样式文件，以及更高效地开发项目。

sass是采用的Ruby语言编写的一款css预处理语言

sass是最早的css预处理语言，有比less更为强大的功能。也是目前企业级开发中应用最多的 CSS 预处理器。

2、列出 Sass 的一些常用功能 ？

常用功能

• 一个开源的预处理器，被解析为 CSS
• 完全兼容 CSS3
• 在 CSS 基础上增加变量、嵌套 、混合等功能
• 在更少的时间内轻松地编写 CSS 代码
• 自定义输出格式

3、解释 SCSS 和 Sass 之间的区别 ？

区别

Sass 和 SCSS 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：

• 文件扩展名不同，Sass 是以.sass后缀为扩展名，而 SCSS 是以.scss后缀为扩展名。
• 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号{}和分号;，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss。

4、Sass 中的嵌套规则是什么 ？

嵌套规则

嵌套是一种将多个逻辑结构相互组合的方法。在 Sass 中, 各种 CSS 规则相互连接。

例如：如果使用多个选择器，则可以在另一个选择器内部使用一个选择器来创建复合选择器。

5、Sass 基础知识

名称	描述
Live Sass Compiler（Sass 编译插件）	VScode 编译 sass 的插件
.scss （sass 文件后缀名）	sass 文件的后缀名之一。在该文件中，可以写花括号{}和分号
.sass （sass 文件后缀名）	sass 文件的后缀名之一。在该文件中，不能写花括号{}和分号
&（sass 修饰符）	修饰符，表示上层标签。如下: span{ &:active{ color: red; } } 编译后的代码是 span:active { color: red; }

6、sass 常用变量

名称	描述
$	使用$，可以用来定义css变量（变量名可自定义），语法如下： 定义变量： 使用变量：text-color;}
lighten()	颜色变量相关的功能函数，可以把颜色变浅
darken()	颜色变量相关的功能函数，可以把颜色变深
@import	关键字，可以用来引入 css 变量
@mixin	关键字，用来定义混入的内容
@include	关键字，用来引入@mixin 定义的混入
@content	关键字。当引入 mixin 时，@include 花括号中的内容可以用该关键字代替