CSS预处理器（Sass、Less）专题测试

19 题 45 分钟难度：★★

考察知识点

Sass与Less基础语法对比
变量定义与使用（$variable vs @variable）
嵌套规则与父选择器引用
混合宏(Mixin)的定义与调用
函数与运算
继承/扩展（@extend vs :extend）
模块导入与模块化组织
条件语句与循环

💡 参考答案在文末

判断题

Sass的占位选择器 %placeholder 与普通类选择器的区别是：占位选择器本身不会输出到CSS，只有被 @extend 扩展时才会出现在编译结果中。

对

错

在Sass嵌套规则中，& 符号总是代表当前所在块的父选择器。

对

错

在Sass中，在嵌套规则内定义的变量默认是局部变量，只在该规则块内有效。使用 !global 标记可以将变量定义为全局变量。

对

错

@forward 规则用于转发另一个模块的所有内容，使得导入当前模块的用户可以访问被转发模块的变量、mixin和函数。

对

错

单选题

以下Sass代码编译后的CSS是什么？

scss

.error {
  color: red;
  border: 1px solid red;
}

.serious-error {
  @extend .error;
  font-weight: bold;
}

css .error, .serious-error { color: red; border: 1px solid red; .serious-error { font-weight: bold;

css .error { color: red; border: 1px solid red; .serious-error { color: red; border: 1px solid red; font-weight: bold;

css .serious-error { color: red; border: 1px solid red; font-weight: bold;

css .error { color: red; border: 1px solid red; } .serious-error { @extend .error; font-weight: bold; }

关于Sass中 mixin 和 extend 的区别，以下说法正确的是？

mixin会将样式复制到每个调用位置，extend会将选择器合并到共同样式块

extend比mixin生成的CSS文件更小

mixin无法传递参数，extend可以传递参数

mixin和extend的编译结果完全相同

以下关于Sass模块导入的说法，错误的是？

@import "variables" 会导入 variables.scss 文件

@use "variables" 是Sass新版本推荐的导入方式

@use "variables" as * 会将所有变量导入到当前命名空间

使用 @use 时，导入的变量可以直接使用 $color 而无需命名空间前缀

以下Sass代码编译后，.outer 和 .inner 的 color 值分别是？

scss

$color: red;

.outer {
  $color: blue;
  color: $color;
  .inner {
    $color: green !global;
    color: $color;
  }
  color: $color;
}

.final {
  color: $color;
}

.outer: blue, .inner: green, .final: red

.outer: blue, .inner: green, .final: green

.outer: red, .inner: green, .final: green

.outer: blue, .inner: blue, .final: blue

以下Sass代码编译后的CSS是什么？

scss

.nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
  }
  a {
    color: blue;
    &:hover {
      color: red;
    }
  }
}

css .nav ul { margin: 0; padding: 0; } .nav li { display: inline-block; } .nav a { color: blue; } .nav a:hover { color: red; }

css nav ul { margin: 0; padding: 0; } nav li { display: inline-block; } nav a { color: blue; } nav a:hover { color: red; }

css .nav { ul { margin: 0; padding: 0; } li { display: inline-block; } }

css .nav ul, .nav li, .nav a { margin: 0; padding: 0; display: inline-block; color: blue; }

以下Sass代码编译后，.box 的 width 值是多少？

scss

$base: 100px;

.box {
  width: $base * 2 + 50px - $base / 2;
}

200px

250px

150px

100px

关于Sass和Less的语法差异，以下说法正确的是？

Sass变量使用 $ 符号，Less变量使用 @ 符号

Sass和Less都使用相同的嵌套语法

Sass的mixin定义使用 @mixin，Less使用 .mixin-name()

以上全部正确

以下Sass代码编译后的CSS是什么？

scss

$theme: dark;

.box {
  @if $theme == light {
    background: white;
    color: black;
  } @else if $theme == dark {
    background: black;
    color: white;
  } @else {
    background: gray;
    color: gray;
  }
}

css .box { background: black; color: white; }

css .box { background: white; color: black; }

css .box { background: gray; color: gray; }

css .box { @if $theme == light { background: white; color: black; } @else if $theme == dark { background: black; color: white; }

以下Sass代码编译后的CSS是什么？

scss

@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

css .box { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

css @mixin border-radius(10px) { border-radius: 10px; .box { border-radius: 10px;

css .box { border-radius: $radius;

css .border-radius { border-radius: 10px;

以下Sass代码生成的CSS类数量是多少？

scss

$colors: (primary: blue, secondary: green, warning: yellow, danger: red);

@each $name, $color in $colors {
  .btn-#{$name} {
    background: $color;
    &:hover {
      @if $name == danger {
        background: darken($color, 10%);
      } @else {
        background: lighten($color, 10%);
      }
    }
  }
}

4个类（.btn-primary, .btn-secondary, .btn-warning, .btn-danger）

8个类（4个基础类 + 4个hover伪类）

12个类（4个基础类 + 4个hover + 4个darken/lighten变体）

0个类（代码有错误无法编译）

多选题

关于Sass的 @extend，以下说法正确的是？

可以扩展任何CSS选择器，包括 .class、%placeholder、#id

扩展会将被扩展选择器的所有样式规则都合并过来

扩展一个选择器时，所有使用该选择器的地方都会受到影响

使用占位选择器 % 是扩展的最佳实践，避免产生未使用的CSS

在mixin内使用 @extend 是安全的，不会有副作用

以下Sass内置函数的用途描述正确的是？

lighten($color, $amount) - 使颜色变亮

darken($color, $amount) - 使颜色变暗

rgba($color, $alpha) - 为颜色添加透明度

calc($expression) - 执行数学计算并保持单位

nth($list, $n) - 获取列表中第n个元素

关于Sass mixin，以下说法正确的是？

mixin可以定义默认参数值：@mixin box($width: 100px)

调用mixin时可以使用关键字参数：@include box($width: 200px)

mixin可以接收内容块，使用 @content 插入

mixin定义的样式会自动输出到CSS中，不需要调用

同一个mixin可以被多次调用，传入不同的参数值

填空题

以下Sass代码使用循环生成多个类，填写编译后的CSS：

scss

@for $i from 1 through 3 {
  .col-!!1_#{$i}!! {
    width: !!2_100px * $i!!;
  }
}

编译后第一个类 .col-1 的宽度是 ____________，第三个类 .col-3 的宽度是 300px。

Sass支持属性嵌套，以下代码编译后的CSS是：

scss

.box {
  font: {
    family: Arial;
    size: 14px;
    weight: bold;
  }
}

编译结果：____________

参考答案

1.正确 2.正确 3.正确 4.正确 5.A 6.A 7.D 8.B 9.A 10.A 11.D 12.A 13.A 14.B 15.A;B;C;D 16.A;B;C;E 17.A;B;C;E 18.#{$i};100px * $i;100px 19..box { font-family: Arial; font-size: 14px; font-weight: bold; }

想在手机上练习这套试卷？

使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码