SCSS 小白快速入门清单

云中雾丽
53 阅读3分钟

我根据你目前正在查看的代码，为你整理一份 SCSS 快速入门清单。包括了代码中出现的核心用法！

📋 SCSS 小白快速入门清单

1. 变量定义 🎨

声明可复用的值，使用 $ 前缀。

// 定义
$color-primary: #1890ff;
$btn-prefix: ".ant-btn";
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

// 使用
color: $color-primary;
border-radius: 2px;
transition: all 0.3s $ease-in-out-cubic;

好处：修改一个地方，全局更新；代码更易维护

2. 嵌套选择器 📦

省去重复书写父选择器，提高代码可读性。

// SCSS
.ant-btn {
  color: blue;
  
  &:hover {
    color: red;  // & 代表父选择器
  }
  
  &-primary {
    color: white;  // 生成 .ant-btn-primary
  }
  
  > a {
    text-decoration: none;  // 子选择器
  }
}

// 编译后的 CSS
.ant-btn { color: blue; }
.ant-btn:hover { color: red; }
.ant-btn-primary { color: white; }
.ant-btn > a { text-decoration: none; }

关键符号：

  • & = 代表当前选择器
  • > = 直接子元素
  • + = 相邻兄弟元素
  • (空格) = 后代元素

3. Mixin（混合器） 🔧

复用一段样式代码，类似函数。

// 定义 Mixin
@mixin button-disabled($text-color: gray, $bg-color: #f5f5f5) {
  color: $text-color;
  background: $bg-color;
  cursor: not-allowed;
  opacity: 0.6;
}

// 使用 Mixin
.btn-danger[disabled] {
  @include button-disabled(#999, #f0f0f0);
}

// 编译后 - 把 Mixin 的代码复制过来
.btn-danger[disabled] {
  color: #999;
  background: #f0f0f0;
  cursor: not-allowed;
  opacity: 0.6;
}

你代码中的例子（第 25-48 行）：

@mixin disabled-state($color-text: $color-text-disabled) {
  color: $color-text;
  border-color: $color-border-disabled;
  background: $color-bg-disabled;
}

@mixin innerA() {
  > a:only-child {
    color: currentColor;
  }
}

// 使用
.ant-btn[disabled] { @include disabled-state(); }

4. 变量插值 #{}

在选择器、属性名或字符串中使用变量。

$btn-prefix: ".ant-btn";
$attr: "color";

// 在选择器中
#{$btn-prefix}-primary {
  color: blue;
}
// 编译后: .ant-btn-primary { color: blue; }

// 在字符串中
content: '前缀: #{$btn-prefix}';

你代码中的例子（第 100 行）：

$btn-prefix: ".ant-btn";

#{$btn-prefix} {  // 等同于 .ant-btn {
  color: black;
}

&#{$btn-prefix}-primary {  // 等同于 .ant-btn.ant-btn-primary {
  color: white;
}

5. 注释 💬

// 这是 SCSS 注释，编译后会被删除

/* 这是 CSS 注释，编译后会保留 */

/* stylelint-disable at-rule-empty-line-before */
// 这种用法可以禁用 linter 规则

6. 操作符 ➕

支持基本的数学运算和颜色运算。

$base-size: 16px;

.button {
  width: $base-size * 2;      // 32px
  padding: $base-size / 4;    // 4px
  margin: $base-size + 8;     // 24px
}

// 颜色运算（了解即可，实际用得不多）
$color: #ff0000;
$lighter: lighten($color, 10%);  // 浅色版本
$darker: darken($color, 10%);    // 深色版本

7. 函数 🔢

SCSS 内置函数处理颜色、长度等。

// 颜色函数
rgba(0, 0, 0, 0.25)           // RGBA 颜色
lighten(#1890ff, 10%)          // 浅化颜色
darken(#1890ff, 10%)           // 深化颜色

// 长度函数
abs(-15px)                     // 绝对值
max(10px, 20px)               // 最大值
min(10px, 20px)               // 最小值

// 你代码中的例子
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

8. 继承 @extend（高级特性）

让一个选择器继承另一个选择器的样式。

.button {
  padding: 10px;
  border: 1px solid gray;
}

.button-primary {
  @extend .button;  // 继承 .button 的样式
  color: white;
  background: blue;
}

// 编译后
.button, .button-primary { padding: 10px; border: 1px solid gray; }
.button-primary { color: white; background: blue; }

9. 条件语句 @if（高级特性）

根据条件应用不同的样式。

$theme: "dark";

.header {
  @if $theme == "dark" {
    background: #333;
    color: white;
  } @else {
    background: white;
    color: #333;
  }
}

10. 循环 @for/@each（高级特性）

生成重复的样式。

// @for 循环
@for $i from 1 through 3 {
  .col-#{$i} {
    width: (100% / 3) * $i;
  }
}
// 生成: .col-1, .col-2, .col-3

// @each 循环
$sizes: sm, md, lg;
@each $size in $sizes {
  .btn-#{$size} {
    font-size: 14px;
  }
}

📚 你当前代码中的用法对照表

用法第几行解释
变量定义4-23$color-primary, $btn-prefix 等
Mixin 定义25-97@mixin disabled-state, @mixin innerA 等
Mixin 使用57, 73, 82@include innerA(), @include disabled-state()
变量插值100, 216#{$btn-prefix}, #{$btn-prefix}-primary
嵌套选择器100-159.ant-btn { ... &:hover { ... } }
颜色函数9, 54rgba(0, 0, 0, 0.25), cubic-bezier(...)
currentColor37CSS 关键字（上一个问题提过）

🎯 初学者建议

优先学习顺序：

  1. ✅ 变量 - 最基础，必学
  2. ✅ 嵌套 - 写 SCSS 必用
  3. ✅ Mixin - 复用代码的利器
  4. ⚠️ 插值 - 偶尔需要
  5. 🔮 @extend, @if, @for - 进阶用法，先掌握前 3 个

实战建议：

  • 用变量统一管理颜色、尺寸
  • 用嵌套减少选择器重复
  • 用 Mixin 复用常见样式组合

需要我详细讲解某个特性吗？😊

avatar
文章
阅读
粉丝