Sass

Sass (Syntactically Awesome Style Sheets) 是一种 CSS 预处理器。它不是直接在浏览器中运行的，而是需要通过编译（或转译）生成标准的 CSS 文件，然后浏览器才能识别和渲染。

它扩展了 CSS 的功能，引入了变量、嵌套、混合（Mixins）、函数、继承等编程特性。

核心特性

变量 (Variables)

• 概念： 用 $name 定义一个值，可以在样式表中多次使用。

• 用途： 统一管理颜色、字体、间距等常用值，方便修改。

• 示例：

  SCSS$primary-color: #3498db;
  $font-stack: Helvetica, sans-serif;
  
  body {
    font: 100% $font-stack;
    color: $primary-color;
  }
  
  .button {
    background-color: $primary-color;
    padding: 10px 20px;
  }

嵌套 (Nesting)

• 概念： 将选择器嵌套在另一个选择器内部，模拟 HTML 的层级结构。

• 用途： 提高代码的可读性和组织性，减少重复选择器。

• 注意： 不要过度嵌套，通常不超过三层。& 符号代表父选择器。

• 示例：

  SCSSnav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
  
      li {
        display: inline-block;
        margin-right: 10px;
  
        a {
          display: block;
          padding: 5px 10px;
          text-decoration: none;
          color: #333;
  
          &:hover { // & 代表父选择器 a
            color: #007bff;
          }
        }
      }
    }
  }

局部文件与导入 (Partials & Import)

• 概念： 将 Sass 代码拆分成多个小文件（局部文件，文件名以下划线 _ 开头），然后使用 @import 规则导入到主文件中。
• 用途： 模块化管理代码，提高可维护性。

混合 (Mixins)

• 概念： 使用 @mixin 定义一组可重用的 CSS 声明，然后使用 @include 引入。可以接受参数。
• 用途： 封装重复的样式块，特别是那些需要参数来调整的样式（如响应式断点、CSS3 前缀等）。

继承 (Extend/Inheritance)

• 概念： 使用 @extend 关键字，让一个选择器继承另一个选择器的所有样式。
• 用途： 减少重复代码，但与 Mixin 的侧重点不同。Mixin 是复制样式，Extend 是共享样式（在编译后的 CSS 中会合并选择器）。
• 注意： 谨慎使用，过度使用可能导致生成的 CSS 文件过大或选择器过于复杂。通常用于语义化相似但样式略有不同的元素。

函数 (Functions)

• 概念： 使用 @function 定义可执行计算并返回值的代码块。

• 用途： 处理颜色、单位转换、数学计算等。

• 示例：

  SCSS@function em($pixels, $context: 16px) {
    @return ($pixels / $context) * 1em;
  }
  
  .title {
    font-size: em(24px); // 转换为 1.5em
    line-height: em(36px);
  }

控制指令 (Control Directives)

• 概念： Sass 提供了 @if, @for, @each, @while 等指令，用于实现条件判断和循环。

• 用途： 生成复杂的、有规律的样式。

• 示例 (以 @for 为例)：

  SCSS@for $i from 1 through 3 {
    .item-#{$i} { // #{} 用于插值，将变量值插入到字符串中
      width: 10px * $i;
    }

---

其中，嵌套、变量、混合、局部导入这四个核心特性构成了Sass的核心竞争力

---