SCSS 简明指南

SCSS（Sass的扩展语法）作为一款强大的CSS预处理器，为开发者提供了更灵活、高效的样式编写方式。它通过增强传统CSS的功能，解决了代码冗余和维护困难的问题。本文将介绍SCSS的核心特性，帮助你快速掌握其用法。

1. 变量

变量允许你在样式表中存储和复用值，例如颜色、字体大小等。变量以 $ 符号开头，并在样式表的顶部定义。

示例

$primary-color: #3498db;
$font-stack: Arial, sans-serif;

body {
   
  color: $primary-color;
  font-family: $font-stack;
}

• 变量定义：$primary-color 和 $font-stack 是变量。
• 变量使用：在样式中直接使用变量名。
• 编译结果：

body {
   
  color: #3498db;
  font-family: Arial, sans-serif;
}

2. 嵌套

SCSS 允许嵌套选择器，使代码结构更接近HTML的层级关系，减少重复代码。

示例

.navbar {
   
  background-color: #333;

  ul {
   
    list-style-type: none;

    li {
   
      display: inline-block;
      margin: 0 10px;

      a {
   
        color: white;
        text-decoration: none;
      }
    }
  }
}

• 嵌套结构：ul 和 li 是 .navbar 的子选择器。
• 编译结果：

.navbar {
   
  background-color: #333;