CSS 预处理器有什么优势？

CSS 预处理器如 Sass（SCSS）或 LESS 提供多方位优势，超越原生 CSS 的功能，显著提升前端开发效率和项目可维护性。主要优势总结如下，并以实例支持：

1. 统一变量管理
   预处理器支持变量存储常量值（颜色、字体大小、尺寸等），避免重复定义和全局修改的耗时。变量增强了样式的一致性，降低错误风险：

   // Sass：使用 $前缀定义变量
   $primary-color: #3498db;
   $font-size: 16px;
   header {
     color: $primary-color;
     font-size: $font-size;
   }
   
   // LESS：使用 @前缀定义变量
   @primary-color: #3498db;
   body {
     background-color: @primary-color;
   }
   

2. 结构化嵌套规则
   支持类似 HTML 结构的多层选择器嵌套，提升代码可读性和维护性。示例 Sass 嵌套：

   nav {
     padding: 1rem;
     ul {
       margin: 0;
       li {
         display: inline-block;
         &:hover { color: $primary-color; } // &伪类快捷操作
       }
     }
   }
   // 编译后等价于原生CSS，减少手写冗余
   

   避免人工错误，尤其在深层项目架构中。

3. 复用混入（Mixin）功能
   封装可重用的属性集合，支持参数传递，应对常见问题（圆角、阴影和渐变等），节省重复代码:

   // Sass Mixin带参数
   @mixin flex-center {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   @mixin border-radius($radius: 5px) {
     -webkit-border-radius: $radius;
            -moz-border-radius: $radius;
                 border-radius: $radius;
   }
   .button {
     @include flex-center();
     @include border-radius(10px);
   }
   

4. 复杂计算与运算符
   提供内置或自定义数学表达式计算值（如 +, -, %, 颜色操作），简化基于间距、百分比或交互的响应式设计:

   // LESS运算符示例
   @base-width: 100%;
   @gutter: 20;
   .item {
     width: (@base-width / 2) - @gutter;
   }
   
   // Sass函数操作颜色转换
   @function to-blue($percentage) {
     @return lighten($primary-color, $percentage);
   }
   body { color: to-blue(10%); }
   

5. 增强逻辑与控制结构
   Sass 尤其强大，支持控制语句（如 @if @else），动态生成样式：

   // Sass循环自动产生颜色板
   @for $i from 1 through 6 {
     .color-#{$i} {
       background-color: adjust-color($base-color, $lightness: -10% * $i);
     }
   }
   

   提升可维护性，替代代码中的硬编码。

6. 模块式组织和文件引入
   @import 管理样式文件分割成模块（Base、Components、Layout），提高扩展性和团队协作效率。但需通过工程化工具（Webpack、Gulp等）编译以确保一致性和避免样式污染风险。

总体益处包括减少错误率、增强代码质量和加速开发流程，但注意编译依赖性及滥用嵌套带来的选择器性能问题（如深嵌套继承）。核心价值在整合构建流程，提供弹性解决方案。