Sass和传统CSS有什么区别？

Sass（Syntactically Awesome Stylesheets）与传统CSS在功能和语法上有一些显著的区别。以下是Sass相比传统CSS的一些关键优势和区别：

1. 变量（Variables）：

   • Sass允许使用变量存储信息，如颜色、字体大小等，以便在样式表中重复使用。这在传统CSS中是不可能的。

   $primary-color: #3498db;
   $padding: 15px;
   
   .container {
     color: $primary-color;
     padding: $padding;
   }
   

2. 嵌套规则（Nesting）：

   • Sass支持嵌套规则，这意味着你可以在父选择器中嵌套子选择器，这使得结构更加清晰，特别是在处理复杂的布局时。

   nav {
     ul {
       margin: 0;
       padding: 0;
       list-style: none;
       li {
         display: inline-block;
       }
     }
   }
   

3. 混合（Mixins）：

   • 混合类似于传统CSS中的混合或伪类，但更加强大和灵活。它们允许你定义可重用的样式组，这些样式组可以带参数。

   @mixin border-radius($radius) {
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     -ms-border-radius: $radius;
     border-radius: $radius;
   }
   
   .box { @include border-radius(10px); }
   

4. 函数（Functions）：

   • Sass提供了内置的函数，如颜色操作和数学计算，这些在传统CSS中不可用。

   width: (100px * 5);
   color: lighten($primary-color, 10%);
   

5. 条件语句和循环（Conditionals and Loops）：

   • Sass支持@if、@for和@each等控制指令，这使得CSS能够实现更复杂的逻辑。

   @for $i from 1 through 3 {
     .item-#{$i} { width: 100px * $i; }
   }
   

6. 继承（Inheritance）：

   • 使用@extend指令，一个选择器可以继承另一个选择器的所有样式，这有助于避免CSS的重复。

   .base-style {
     font-size: 18px;
     color: #333;
   }
   
   .important-text {
     @extend .base-style;
     font-weight: bold;
   }
   

7. 导入（Import）：

   • Sass允许你导入其他Sass文件作为模块，这有助于将样式表分割成更小的、更易管理的部分。

   @import 'variables';
   @import 'mixins';
   @import 'base';
   

8. 部分应用和扩展（Partials and Extensions）：

   • Sass允许你创建部分文件（通常以_partial开头命名），这些文件可以被其他Sass文件导入。

9. 错误和调试（Error and Debugging）：

   • Sass提供了调试工具，如@debug，可以帮助开发者理解变量和混合的输出。

10. 注释（Comments）：

    • Sass的注释可以是单行或多行，而且在编译为CSS时可以保留有意义的注释。

11. CSS兼容性（CSS Compatibility）：

    • 任何有效的CSS都是有效的Sass，这意味着你可以在不改变现有CSS代码的情况下开始使用Sass。

12. 编译过程（Compilation Process）：

    • Sass代码需要被编译为CSS，这个过程可以通过命令行工具、构建系统或集成开发环境（IDE）插件来完成。

Sass的这些功能提供了比传统CSS更强大的样式管理和定制能力，使得开发大型和复杂的前端项目更加高效。