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中执行布尔运算?

可以使用and和＆和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中，但是主要影响显示在样式表的顶层。例如：-

 h2{  
color: violet;  
}  
.style{  
width: 500px;  
@media screen and (orientation: portrait){  
width:200px;  
margin-left: 80px;  
}  
}  

25)SASS中根目录指令的用途是什么?

Sass @ at-root伪指令是嵌套规则的集合，这些规则用于在文档根目录处设置样式。例如：-

 h2{  
color: blue;  
background-color: pink;  
@at-root {  
.style{  
 font-size: 20px;  
 font-style: bold;  
 color: violet;  
 }  
 }  
}