Sass 详解：CSS 预处理器的核心功能与用法

Sass（Syntactically Awesome Stylesheets）是一种扩展CSS的预处理器，它提供了更加灵活和高效的方式来编写样式表。通过Sass，你可以使用变量、嵌套规则、混合宏、继承等功能，使CSS更具可维护性和模块化。以下是Sass的一些核心功能和概念的详细介绍：

1. 变量（Variables）

变量允许你存储CSS属性的值，然后在你的样式表中重复使用它们。

scss 复制代码

// 定义变量
$primary-color: #333;
$font-stack: Helvetica, sans-serif;

// 使用变量
body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. 嵌套（Nesting）

Sass允许你在选择器内嵌套其他选择器，使CSS更具层次性和可读性。

scss 复制代码

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

3. 部署和导入（Partials and Import）

Sass允许你将CSS拆分为更小的片段（部分），然后在需要时导入它们。这使得样式表更易于管理。

scss 复制代码

// _base.scss
body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

// main.scss
@import 'base';

.container {
  margin: 0 auto;
}

4. 混合宏（Mixins）

混合宏允许你定义可重用的CSS代码块，然后在其他地方引用它们。它们可以接受参数，使它们更具动态性。

scss 复制代码

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

5. 继承（Inheritance）

Sass允许一个选择器继承另一个选择器的样式，避免代码重复。

scss 复制代码

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success { @extend .message; border-color: green; }
.error   { @extend .message; border-color: red; }
.warning { @extend .message; border-color: yellow; }

6. 运算（Operations）

Sass支持基本的数学运算，使得在计算宽度、高度、颜色等属性时更加方便。

scss 复制代码

.container {
  width: 100% - 20px;
}

.box {
  width: 100px / 2;
  height: 50px + 20px;
}

.primary-color {
  color: #333 + #222;
}

7. 函数（Functions）

Sass提供了许多内置函数，允许你对颜色、字符串、数字等进行操作。同时，你也可以定义自己的函数。

scss 复制代码

@function calculate-margin($width) {
  @return $width / 2;
}

.container {
  margin: calculate-margin(100px);
}

8. 插值（Interpolation）

插值允许你动态生成选择器名、属性名或属性值。

scss 复制代码

$side: left;

.rounded {
  border-#{$side}-radius: 5px;
}

9. 条件语句和循环（Control Directives and Loops）

Sass支持条件语句和循环，使得样式表更具动态性。

scss 复制代码

// 条件语句
@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

// 循环
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

通过这些强大的功能，Sass极大地增强了CSS的表现力和灵活性，使得开发者可以编写更简洁、结构更清晰的样式代码。