全部学科

Web前端

TypeScript vue CSS HTML javascript pinia vite

通用技术

redis git docker nginx mysql zookeeper rabbitmq

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Python全栈

GO后端

golang gorm gin

NodeJS全栈

小程序首页

📝 1 篇文章 20 道配套习题

CSS预处理器（Sass、Less）

专题说明

CSS预处理器扩展了CSS语言，添加了变量、嵌套、混合、函数、继承、循环等编程特性，使CSS更易维护、更易复用。本专题系统讲解Sass和Less两大主流预处理器的核心语法与最佳实践。

学习目标

掌握Sass/Less变量定义、数据类型与作用域
理解嵌套规则与父选择器引用
熟练使用Mixin混合与继承扩展
掌握条件判断与循环语句
理解Sass与Less的语法差异与应用场景

学习内容

变量与作用域：变量定义、数据类型、!default与!global标记
嵌套规则：选择器嵌套、&父选择器引用、属性嵌套
混合（Mixin）：mixin定义、参数传递、@content内容块
继承与扩展：@extend继承、占位符选择器
函数与运算：内置函数、数学运算、颜色函数
条件与循环：@if条件、@for/@each/@while循环
模块化：@import导入、@use/@forward新模块系统

学习建议

先从变量和嵌套入手，理解预处理器的核心思想
重点掌握Mixin的使用场景，如响应式断点、浏览器兼容
注意Sass与Less的语法差异，选择适合项目的预处理器
实践中结合栅格系统、组件库开发巩固技能

📝 发现内容有误？点击此处直接编辑

📝 配套习题（20 题）

1

单选题

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

scss

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

A

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

B

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

C

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

D

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

2

判断题

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

A

对

B

错

3

填空题

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

scss

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

编译结果：________________________

4

单选题

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

scss

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

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

A

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

B

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

C

css .box { border-radius: $radius;

D

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

5

多选题

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

A

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

B

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

C

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

D

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

E

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

6

单选题

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

A

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

B

extend比mixin生成的CSS文件更小

C

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

D

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

7

单选题

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

scss

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

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

A

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

B

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

C

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

D

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

8

判断题

A

对

B

错

9

多选题

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

A

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

B

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

C

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

D

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

E

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

10

单选题

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

scss

$base: 100px;

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

A

200px

B

250px

C

150px

D

100px

11

多选题

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

A

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

B

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

C

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

D

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

E

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

12

填空题

以下自定义函数计算两数之和：

scss

@function sum($a, $b) {
  @return !!1_$a + $b!!;
}

$total: sum(10, 20); // $total 的值是 ______

13

单选题

以下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;
  }
}

A

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

B

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

C

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

D

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

14

多选题

关于Sass循环语句，以下说法正确的是？

A

@for $i from 1 through 3 会循环3次，$i值为1、2、3

B

@for $i from 1 to 3 会循环2次，$i值为1、2

C

@each $item in list 可以遍历列表中的每个元素

D

@each $key, $value in map 可以遍历地图的键值对

E

@while 循环在条件为真时持续执行，可能导致无限循环

15

填空题

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

scss

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

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

16

单选题

以下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%);
      }
    }
  }
}

A

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

B

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

C

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

D

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

17

填空题

以下Sass代码使用 @each 遍历嵌套列表：

scss

$breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px);

@each $!!1_name!!, $!!2_size!! in $breakpoints {
  @media (min-width: $!!3_size!!) {
    .container-#{$!!4_name!!} {
      max-width: $!!5_size!!;
    }
  }
}

18

单选题

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

A

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

B

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

C

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

D

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

19

判断题

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

A

对

B

错

20

单选题

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

A

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

B

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

C

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

D

以上全部正确

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验