SCSS 是 SASS (Syntactically Awesome Stylesheets) 的一种语法，增加了对嵌套规则、变量和其他功能的支持，使得 CSS 的编写更加高效和可维护。以下是 SCSS 的核心知识点，通过这些知识点，你可以快速上手并运用 SCSS。

1. 变量 (Variables)

SCSS 允许你使用变量来存储值，这样你可以在整个样式表中重复使用这些值。

$primary-color: #3498db;
$padding: 16px;

.container {
  color: $primary-color;
  padding: $padding;
}

2. 嵌套 (Nesting)

SCSS 支持嵌套规则，这样可以更直观地组织样式。

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

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

      a {
        text-decoration: none;
        color: $primary-color;

        &:hover {
          color: darken($primary-color, 10%);
        }
      }
    }
  }
}

3. 部分 (Partials) 和 导入 (Import)

你可以将 SCSS 拆分成多个文件，并在主文件中导入它们。

// _variables.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

// _base.scss
body {
  font: 100% $font-stack;
  color: $primary-color;
}

// main.scss
@import 'variables';
@import 'base';

4. 混合 (Mixins)

Mixins 允许你定义样式并在多个地方重复使用，支持参数传递。

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

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

5. 继承 (Inheritance)

SCSS 允许一个选择器继承另一个选择器的样式。

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

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

.error {
  @extend .message;
  border-color: red;
}

6. 运算 (Operations)

你可以在 SCSS 中进行运算，例如加法、减法、乘法和除法。

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

7. 函数 (Functions)

SCSS 提供了许多内置函数，允许你对颜色、字符串等进行操作。

$color: #3498db;

.container {
  background-color: lighten($color, 10%);
  border-color: darken($color, 10%);
}

例子：综合运用 SCSS

以下是一个综合运用 SCSS 的例子，演示了变量、嵌套、部分、混合、继承和函数的用法：

// _variables.scss
$base-font-size: 16px;
$base-line-height: 1.5;
$base-color: #333;
$heading-color: darken($base-color, 20%);
$primary-color: #3498db;

// _mixins.scss
@mixin respond-to($media) {
  @if $media == 'phone' {
    @media (max-width: 600px) { @content; }
  }
  @else if $media == 'tablet' {
    @media (max-width: 900px) { @content; }
  }
}

// _base.scss
body {
  font-size: $base-font-size;
  line-height: $base-line-height;
  color: $base-color;
}

h1, h2, h3, h4, h5, h6 {
  color: $heading-color;
}

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

// main.scss
@import 'variables';
@import 'mixins';
@import 'base';

.container {
  width: 100%;
  padding: 20px;

  @include respond-to('tablet') {
    padding: 10px;
  }

  .content {
    margin: 0 auto;
    max-width: 800px;
    
    .article {
      margin-bottom: 20px;
      
      h2 {
        margin-bottom: 10px;
      }
      
      p {
        margin-bottom: 10px;
      }
    }
  }
}

通过以上内容，你可以快速掌握 SCSS 的核心知识，并开始编写结构化、模块化和可维护的样式表。对于更多详细的用法和示例，可以参考官方文档和相关教程。