SCSS 是 SASS (Syntactically Awesome Stylesheets) 的一種語(yǔ)法，增加了對(duì)嵌套規(guī)則、變量和其他功能的支持，使得 CSS 的編寫更加高效和可維護(hù)。以下是 SCSS 的核心知識(shí)點(diǎn)，通過(guò)這些知識(shí)點(diǎn)，你可以快速上手并運(yùn)用 SCSS。

1. 變量 (Variables)

SCSS 允許你使用變量來(lái)存儲(chǔ)值，這樣你可以在整個(gè)樣式表中重復(fù)使用這些值。

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

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

2. 嵌套 (Nesting)

SCSS 支持嵌套規(guī)則，這樣可以更直觀地組織樣式。

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) 和 導(dǎo)入 (Import)

你可以將 SCSS 拆分成多個(gè)文件，并在主文件中導(dǎo)入它們。

// _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 允許你定義樣式并在多個(gè)地方重復(fù)使用，支持參數(shù)傳遞。

@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 允許一個(gè)選擇器繼承另一個(gè)選擇器的樣式。

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

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

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

6. 運(yùn)算 (Operations)

你可以在 SCSS 中進(jìn)行運(yùn)算，例如加法、減法、乘法和除法。

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

7. 函數(shù) (Functions)

SCSS 提供了許多內(nèi)置函數(shù)，允許你對(duì)顏色、字符串等進(jìn)行操作。

$color: #3498db;

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

例子：綜合運(yùn)用 SCSS

以下是一個(gè)綜合運(yùn)用 SCSS 的例子，演示了變量、嵌套、部分、混合、繼承和函數(shù)的用法：

// _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;
      }
    }
  }
}

通過(guò)以上內(nèi)容，你可以快速掌握 SCSS 的核心知識(shí)，并開始編寫結(jié)構(gòu)化、模塊化和可維護(hù)的樣式表。對(duì)于更多詳細(xì)的用法和示例，可以參考官方文檔和相關(guān)教程。