# 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 花括号中的内容可以用该关键字代替
上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X