面试必备！常见SASS面试题合集 _SASS

文章图片
下面列出了SASS面试常见问题和解答。
1)定义SASS？
SASS表示语法很棒的样式表。它是一个CSS预处理程序, 用于减少与CSS的重复并节省时间。它为基本语言增添了力量和优雅, 并帮助你添加变量, 嵌套规则, mixin, 内联导入, 继承等, 所有这些都具有与CSS完全兼容的语法。

文章图片
2)谁是SASS的发明者？
Hampton Catlin被称为SASS的父亲。
3)使用SASS的原因是什么？
以下是SASS受欢迎的一些重要原因。

你可以轻松高效地编写代码, 并且易于维护。
它是一种预处理语言, 提供了CSS语法。
它是CSS的超集, 包含CSS的所有功能, 并且是用Ruby编码的开源预处理器。
它是更稳定, 功能更强大的CSS扩展和样式文档, 结构更清晰。
它促进了可重用性方法, 逻辑语句以及一些内置功能, 例如颜色处理, 数学和参数列表项。

4)我们可以使用SASS多少种方法？
我们可以通过三种不同的方式使用SASS：

作为命令行工具。
作为独立的Ruby模块。
作为任何启用了Rack的框架的插件。

5)SASS最吸引人的功能是什么？

它更加稳定, 强大并且完全兼容CSS3。
这样可以节省时间, 因为它可以帮助你以更少的代码编写CSS。
它使用其语法。
它基于JavaScript和CSS的超集。
它是一个开放源代码的预处理程序, 可以解释为CSS。
它包含用于操纵颜色和其他值的各种功能。
它具有用于库的高级控制指令。
它提供格式良好, 可自定义的输出。

6)Sass脚本支持哪些数据类型？
Sass脚本支持以下数据类型：

布尔值(对或错)
数(1、5、13、10像素)
空值
颜色(红色, ＃FF0000)
文本字符串, 不带引号(” foo” , ” bar” )
用逗号或空格分隔的值列表(2.0em, Verdana, Arial, Helvetica)
从一个值映射到另一个值(键1：值1, 键2：值2)
功能参考。

SASS始终支持所有其他类型的CSS属性值, 例如Unicode范围, 特殊字符和不带引号的字符串。
7)哪个变量用于定义SASS？
变量以美元($)符号开头, 并且变量的分配以分号(; )符号完成。
8)解释SCSS和Sass之间的区别？
SCSS和Sass之间的主要区别如下：
Sass就像CSS预处理器。它具有CSS3的扩展名。 Sass源自另一个称为Haml的预处理器。
Sass包含两种语法：

” SCSS” 是第一种语法, 它使用.scss扩展名。
缩进语法或” Sass” 是另一种语法, 它使用.sass扩展名

你只需将扩展名从.CSS更改为.SCSS, 即可将有效的CSS文档隐藏到Sass中。它与CSS完全兼容。 SCSS提供CSS友好的语法来缩小Sass与CSS之间的差距。 SCSS称为Sassy CSS。
9)解释使用Sass @import函数吗？

它有助于你扩展CSS导入规则。为此, 你需要启用Sass和SCSS文件的导入。
它可以将所有导入的文件合并到一个输出的CSS文件中。
它用于虚拟匹配和混合任何文件。
需要导入文件名才能导入功能。
它比平面CSS更好地提供文档样式表示。
它可以帮助你使响应式设计项目更加有条理。

10)Sass的优点是什么？

节省时间。
更高效, 更快捷。
与所有版本的CSS兼容。
你可以使用嵌套语法和有用的功能, 例如颜色处理, 数学和其他值。
在编程结构中编写干净的CSS
它是CSS的超集, 并使用nested和others值。

11)Sass中的嵌套规则是什么？
嵌套是一种将多个逻辑结构相互组合的方法。在Sass中, 各种CSS规则相互连接。
例如, 如果使用多个选择器, 则可以在另一个选择器内部使用一个选择器来创建复合选择器。
12)Sass或Less是哪个更好？
由于以下原因, Sass胜于少：

Sass提供了使用诸如循环, 条件之类的逻辑语句的便利, 还方便你编写可重用的方法。
Sass的用户可以访问公司的图书馆。 Sass用户还可以使用一些很棒的功能, 例如跨浏览器支持, 旧版浏览器黑客和动态Sprite Map生成。
Compass还提供了添加外部框架(如最上方的Bootstrap, Blueprint)的功能。
Sass为你提供方便的功能编写工具

13)用Sass编写占位符选择器的方式是什么？
在Sass中, 占位符选择器可以与类或id选择器一起使用。在标准CSS中, 这些用” ＃” 或” 。” 指定, 但是在SASS中, 它们用” ％” 替换。它使用@extend指令在CSS中显示结果。例如：

.para1 { color: blue; } .para2 { @extend .para1; font-size:30px; }

14)Sass中的数字运算是什么？
在Sass中, 数字运算用于数学运算, 例如加, 减, 乘和除。 Sass数字运算将执行类似的操作, 例如获取像素值并将其转换为百分比, 而不会带来很多麻烦。
15)Sass中的颜色操作是什么？
在Sass中, 颜色运算允许使用颜色。在Sass中, 颜色运算允许同时使用颜色分量和算术运算。
16)我们如何在Sass中执行布尔运算？
布尔运算可以通过使用＆, ＆和not运算符在Sass脚本上执行。
17)Sass中的括号是什么？
括号用于提供影响操作顺序的符号逻辑。它是一对标记, 通常用圆括号()或方括号[]标记。
18)定义使用Sass Mixin函数吗？
Mixin函数用于定义样式。函数和Mixins非常相似。你可以在整个样式表中重复使用此样式。要重新使用它, 你不需要使用非语义类, 例如.float-left。 Mixin可以存储多个值或参数, 并可以调用函数以避免编写重复代码。它的名称可以互换使用下划线和连字符。
19)在Sass中干混出Mixin函数有什么用？
DDRY输出Mixin函数分为两个部分：静态部分和动态部分。
静态Mixin包含可能会重复的信息, 而动态Mixin是用户要调用的功能。
20)描述Sass注释和常规CSS注释之间的区别？
常规CSS中的注释以/ * * /开头, 而Sass包含两个命令。带有//的单行注释和带有/ * * /的多个CSS注释。
21)哪个指令用于检测SASS中的错误？
Sass @debug指令用于检测错误, 并向标准错误输出流显示Sass脚本表达式值。例如：

$font-sizes: 10px + 20px; $style: ( color: #bdc3c7 ); .container{ @debug $style; @debug $font-sizes; }

22)SASS系统有哪些要求？
这些是Sass系统的要求：

.Operating System - Cross platform .Browser support - Internet Explorer, Google Chrome, Safari, Opera. .Programming language - Ruby.

23)SASS中@extend指令的用途是什么？
SASS @extend指令用于将一组CSS属性从一个选择器共享到另一个选择器。这是Sass的非常重要和有用的功能。它允许类彼此共享一组属性。它使你的代码更少, 并方便你重复重写。例如：

.message border: 1px solid #ccc padding: 10px color: #333 .success @extend .message border-color: green .error @extend .message border-color: red .warning @extend .message border-color: yellow

24)@media指令在SASS中的作用是什么？
Sass @media指令用于将样式规则设置为不同的媒体类型。它支持并扩展@media规则。该指令可以嵌套在选择器SASS中, 但是主要影响显示在样式表的顶层。例如：-