面试题：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 提高了样式代码的可读性、可维护性和复用性，让开发者能够更高效地编写和管理样式表，尤其适用于大型项目。