SCSS使用手册

SCSS（Sassy CSS）是Sass（Syntactically Awesome Stylesheets）的一种语法扩展，是一种增强了CSS功能的样式表语言。SCSS的主要特点是它与CSS完全兼容，同时引入了许多使CSS更具动态性和模块化的功能。

关键特性：

1. 变量：使用$定义变量

scss
复制代码
$primary-color: #333;
body {
  color: $primary-color;
}

2. 嵌套：SCSS支持嵌套语法，使得样式规则更加直观和层次化，类似于HTML的结构。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
}

3. 部分和导入：SCSS可以将样式拆分为多个文件，然后通过@import指令将它们导入到一个主文件中，从而使样式更易于管理。或@use。

// _variables.scss
$primary-color: #333;

// main.scss
@import 'variables';
// 或
@use 'variables.scss' as *;
body {
  color: $primary-color;
}

4. 混合（Mixins）：可以使用@mixin创建可重复使用的代码块，并使用参数来定制这些代码块。

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

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

5. 继承：SCSS允许一个选择器继承@extend另一个选择器的所有样式，从而减少冗余代码。

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

.success {
  @extend .message;
  border-color: green;
}

SCSS 文件通常以.scss为扩展名。在编写完SCSS代码后，需要将其编译为标准的CSS文件，浏览器才能理解和应用样式。