面试题：Sass

Sass（Syntactically Awesome Stylesheets）是 CSS 的扩展语言，与原生 CSS 相比，Sass 具有以下特征：

语法特性

• 嵌套语法：在 CSS 中，书写多层嵌套选择器时代码会冗长且可读性差，Sass 支持选择器嵌套，使代码结构更清晰，更贴合 HTML 的层级关系。

  /* CSS /
  nav ul li a {
  color: blue;
  }
  / Sass */
  nav {
  ul {
  li {
  a {
  color: blue;
  }
  }
  }
  }

• 变量使用：CSS 中虽然有自定义属性（CSS 变量），但 Sass 更早实现变量功能，且使用起来更方便。可以用变量存储颜色、字体大小等重复使用的值，修改时只需改一处。

  /* CSS /
  body {
  color: #333;
  }
  h1 {
  color: #333;
  }
  / Sass */
  primary-color: #333; body { color: primary-color;
  }
  h1 {
  color: $primary-color;
  }

• 运算功能：Sass 支持加、减、乘、除、取模等运算，方便处理数值，比如动态计算元素的宽度、边距等。

  width: 100px; div { width: width * 2; // 宽度为200px
  margin-left: $width / 2; // 左边距为50px
  }

功能特性

• Mixin（混入）：可以定义一组可复用的样式，然后在需要的地方引入，避免重复编写相同样式。

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

• 继承 ：Sass 的继承特性（@extend）可以让一个选择器继承另一个选择器的所有样式，减少代码冗余。

  .success {
  color: green;
  border: 1px solid green;
  }
  .special-success {
  @extend.success;
  font-weight: bold;
  }

• 函数：Sass 内置了许多函数，如颜色处理函数、字符串函数、数学函数等，还支持自定义函数，方便对数据进行处理。

  // 自定义函数计算正方形面积
  @function square(size) { @return size * $size;
  }
  div {
  width: square(10px); // 宽度为100px
  }

组织管理特性

• 模块化 ：Sass 允许通过 @import 指令导入其他 Sass 文件，将样式分割成多个模块，便于维护和管理。比如把全局样式、组件样式等分别写在不同文件中。

  // main.scss中导入其他样式文件
  @import 'variables';
  @import 'components/button';

通过这些特性，Sass 提高了样式代码的可读性、可维护性和复用性，让开发者能够更高效地编写和管理样式表，尤其适用于大型项目。