CSS预处理器核心价值

考察点分析 link

本题主要考核候选人对现代CSS工程化方案的理解深度，重点评估以下维度：

1. 预处理器机制理解：是否掌握变量作用域、混合宏等核心功能的实现差异
2. 代码组织能力：能否通过嵌套语法展示结构化编程思维
3. 性能优化意识：是否理解@extend与mixin的性能差异及适用场景

具体技术评估点：

• 变量作用域层级差异（块级作用域 vs 全局提升）
• 参数处理机制对比（默认参数/关键字参数支持度）
• 循环实现原理差异（Sass的@each vs Less的mixin递归）
• 嵌套语法对选择器层级的影响
• @extend的样式合并优化逻辑

技术解析 link

关键知识点 link

作用域机制 > 混合宏参数 > 循环控制 > 嵌套优化 > @extend原理

变量作用域：

• Sass采用块级作用域（Block-level scope），类似JavaScript的let声明。内部变量不会污染外部作用域
• Less使用逐级向上查找的作用域（Closest Scope），类似CSS自定义属性逻辑

混合宏参数：

  // Sass支持默认参数、关键字参数、剩余参数
@mixin button($color: blue, $size: 10px) {
  color: $color;
  font-size: $size;
}

.button-lg {
  @include button($size: 16px); // 关键字传参
}
  

循环控制：

• Sass原生支持@for、@each、@while三种循环结构
• Less通过mixin递归模拟循环：

  .loop(@n) when (@n > 0) {
  .item-@{n} { width: 10px * @n; }
  .loop(@n - 1);
}
.loop(5);
  

嵌套优化： 通过结构化嵌套保持样式与DOM结构的对应关系，减少重复前缀书写：

  .card {
  padding: 1rem;
  
  &-header { // 生成.card-header
    font-size: 1.5rem;
    
    &:hover { // 生成.card-header:hover
      color: blue;
    }
  }
}
  

问题解答 link

Sass与Less的核心差异：

1. 变量作用域：

• Sass的变量作用域类似JS块级作用域，嵌套内定义的变量不会影响外部
• Less的变量采用就近原则，后定义的变量会覆盖全局变量

2. 混合宏参数：

• Sass支持默认参数、命名参数、剩余参数等完整功能
• Less参数处理较简单，主要依赖位置参数和@arguments关键字

3. 循环语句：

• Sass提供多种原生循环控制结构
• Less需通过mixin递归实现类似效果

嵌套语法通过模拟DOM层级结构，将相关样式集中管理，降低维护成本。@extend通过合并选择器减少重复样式输出，比mixin直接复制代码更高效：

  %base-btn {
  padding: 8px 12px;
  border-radius: 4px;
}

.primary-btn {
  @extend %base-btn;
  background: blue;
}

.warning-btn {
  @extend %base-btn; 
  background: orange;
}
  

编译后生成.primary-btn, .warning-btn { ... }，避免代码冗余

深度追问 link

1. @extend与mixin的性能差异如何量化？ 性能差异主要体现在CSS输出体积，通过AST分析工具可对比生成代码量

2. Sass模块化方案如何实现？ 使用@use替代@import，支持命名空间和私有变量

3. 如何处理@extend导致的特异性问题？ 避免在嵌套过深的选择器中使用，优先通过类组合控制样式层级