css scss

// SCSS 示例代码

// 变量定义
$primary-color: #3498db;
$font-size: 16px;

// 混合宏 (mixin)
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

// 嵌套选择器
.nav-bar {
  background-color: $primary-color;
  ul {
    list-style: none;
    li {
      display: inline-block;
      margin: 0 10px;
      a {
        text-decoration: none;
        color: white;
        @include border-radius(5px);
        padding: 5px 10px;
        &:hover {
          background-color: darken($primary-color, 10%);
        }
      }
    }
  }
}

// 使用变量和混合宏
.box {
  background-color: $primary-color;
  font-size: $font-size;
  @include border-radius(10px);
}

解释说明：

• 变量：SCSS 支持使用 $ 符号定义变量，方便在整个样式表中复用相同的值。例如 $primary-color 和 $font-size。
• 混合宏（Mixin）：通过 @mixin 定义可复用的代码块，如 border-radius，并在需要的地方使用 @include 调用。
• 嵌套选择器：SCSS 允许嵌套 CSS 选择器，使代码结构更加清晰，减少重复书写父级选择器。
• 伪类和伪元素：在嵌套结构中可以直接使用 &:hover 等伪类，简化了代码编写。

如果你需要更详细的解释或有其他问题，请告诉我！