SCSS（Sassy CSS）是 Sass（Syntactically Awesome Stylesheets）的一种语法扩展，它是 CSS 的增强版本，提供了变量、嵌套规则、混合宏、继承等功能，使得 CSS 更加强大、灵活和易于维护。SCSS 与 CSS 基本兼容，区别在于 SCSS 允许使用更强大的功能，如变量、嵌套、运算等。

下面是 SCSS 的一些基础知识，帮助你快速入门。

1. SCSS 基本语法

SCSS 的语法与 CSS 基本相同，唯一的区别在于 SCSS 允许嵌套、变量等高级功能。

/* SCSS 语法 */
$primary-color: #333; /* 定义变量 */

body {
  color: $primary-color; /* 使用变量 */
}

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

  &:hover { /* 嵌套 */
    color: lighten($primary-color, 20%); /* 使用 SCSS 函数 */
  }
}

2. 变量（Variables）

SCSS 允许你定义变量来存储值，以便重用。变量使用 $ 符号。

$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

3. 嵌套（Nesting）

SCSS 支持嵌套规则，这使得 CSS 的结构更符合 HTML 的层次结构。

/* 传统 CSS */
nav a {
  color: #333;
}

nav a:hover {
  color: #f00;
}

/* SCSS 嵌套 */
nav {
  a {
    color: #333;
    
    &:hover {
      color: #f00;
    }
  }
}
  • & 符号代表父级元素，允许对其进行修改。

4. 混合宏（Mixins）

混合宏（mixins）是一种重用 CSS 代码的方法，允许你定义一个可复用的代码块，并且可以传递参数。

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

/* 使用混合宏 */
.box {
  @include border-radius(10px);
}
  • @mixin 用来定义混合宏。
  • @include 用来调用混合宏。

5. 继承（Inheritance）

继承允许一个选择器继承另一个选择器的样式，从而避免重复的代码。

/* 定义一个通用样式 */
%button-styles {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

/* 使用继承 */
.button {
  @extend %button-styles;
  background-color: #3498db;
}

.button-danger {
  @extend %button-styles;
  background-color: red;
}
  • % 符号用来定义占位符选择器，只能通过 @extend 扩展，而不会直接生成 CSS 规则。

6. 运算（Operations）

SCSS 支持基本的数学运算，可以在样式表中直接进行计算。

$base-width: 100px;
$padding: 20px;

.container {
  width: $base-width + $padding; /* 120px */
  margin: $base-width / 2; /* 50px */
}

7. 条件语句和循环（Control Directives）

SCSS 提供了类似编程语言中的控制语句，比如 @if, @else, @for, @each, @while，可以用来进行更复杂的样式控制。

$theme: light;

.button {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else {
    background-color: black;
    color: white;
  }
}

@for $i from 1 to 5 {
  .box-#{$i} {
    width: 10px * $i;
  }
}
  • @if 用来判断条件。
  • @for 用来创建循环。
  • #{$i} 用来在选择器中插入变量值。

8. 文件导入（@import 和 @use）

SCSS 允许将样式拆分到多个文件中，并通过 @import 或 @use 将它们合并。

/* _variables.scss 文件 */
$primary-color: #3498db;
$font-size: 16px;

/* style.scss 文件 */
@use 'variables';

body {
  color: variables.$primary-color;
  font-size: variables.$font-size;
}
  • @import 逐渐被 @use 取代，因为 @use 提供了更好的模块化和命名空间支持。

9. CSS 输出

SCSS 文件需要经过编译，生成普通的 CSS 文件。可以使用 Sass CLI 或通过构建工具（如 Webpack、Gulp）进行编译。

sass style.scss style.css

总结

SCSS 是 CSS 的扩展，提供了很多强大的功能，让样式表的编写更加简洁、灵活。记住以下几点可以帮助你快速掌握 SCSS：

  • 变量：存储值，便于重用。
  • 嵌套：根据 HTML 结构组织 CSS。
  • 混合宏：复用样式块，支持传参。
  • 继承：减少代码重复。
  • 运算：直接在 SCSS 中进行计算。
  • 控制语句：使用条件判断和循环。

如果你有更具体的问题，随时告诉我！