面试必备!常见SASS面试题合集

面试必备!常见SASS面试题合集

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

文章图片
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中, 但是主要影响显示在样式表的顶层。例如:-
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; } } }

HTML面试问题
SQL面试题
Android面试题
MySQL面试问题
Java OOP面试问题
休眠面试问题
工作/人力资源面试问题
PL / SQL面试问题
Oracle面试问题
SQL Server面试问题
Java基础面试问题
【面试必备!常见SASS面试题合集】春季面试问题

    推荐阅读