指南

Scss 继承、占位符技巧

全面讲解 Scss 中 @extend、%placeholder 的用法，以及结合 BEM 和模块化拆分的实用技巧，助你写出干净高复用的代码。

🎯 引言

学会这篇文章，你能够用 Scss 的继承和占位符功能，写出更简洁、高效的样式代码。同时，结合 BEM 规范和合理的文件拆分，实现清晰的代码结构。这样不但让样式更易维护，还能极大提升代码复用度。对于刚入门的前端小伙伴来说，这真是写好 CSS/SCSS 的必备技能。

🌟 @extend 的使用

Scss 的 @extend 是继承机制的核心，它允许一个选择器继承另一个选择器的所有样式，避免重复写样式。

想象一下，你有一组基础按钮样式：

.button {
    padding: 10px 20px;
    border-radius: 4px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #2980b9;
}

现在有一个 .button-primary，想复用 .button 的样式，单独改颜色。用 @extend 就很方便：

.button-primary {
    @extend .button;
    background-color: #e74c3c;

    &:hover {
        background-color: #c0392b;
    }
}

.button,
.button-primary {
    padding: 10px 20px;
    border-radius: 4px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover,
.button-primary:hover {
    background-color: #2980b9;
}

.button-primary {
    background-color: #e74c3c;
}
.button-primary:hover {
    background-color: #c0392b;
}

这样，.button-primary 会继承 .button 的所有样式，避免样式重复写。

@extend 会让被继承的选择器和继承者合并生成新的选择器组，样式复用的同时避免冗余代码。但要避免继承过多复杂的选择器，防止生成过于复杂的 CSS 规则。

什么时候用 @extend？

多个类共享一套基础样式，只需在子类中继承即可
对象复用，如按钮、卡片、表单元素等样式基本统一
避免把通用样式写多次，维护更方便

小例子

.message {
    padding: 10px;
    border-radius: 3px;
    color: #fff;
}

.message-success {
    @extend .message;
    background-color: #2ecc71;
}

.message-error {
    @extend .message;
    background-color: #e74c3c;
}

.message,
.message-error,
.message-success {
    padding: 10px;
    border-radius: 3px;
    color: #fff;
}

.message-success {
    background-color: #2ecc71;
}

.message-error {
    background-color: #e74c3c;
}

这段代码清晰地展示了如何用继承实现多种消息框样式，写起来简洁易懂。

🌟 %placeholder 的应用

%placeholder 是 Scss 中定义占位符选择器的一种写法，它和普通类选择器不同，不会被编译成 CSS 的选择器，只能被 @extend 使用。这让它成为代码复用的另一大利器。

比如：

%btn-base {
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

.btn-primary {
    @extend %btn-base;
    background-color: #3498db;
    color: white;
}

.btn-secondary {
    @extend %btn-base;
    background-color: #95a5a6;
    color: white;
}

.btn-secondary,
.btn-primary {
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

.btn-primary {
    background-color: #3498db;
    color: white;
}

.btn-secondary {
    background-color: #95a5a6;
    color: white;
}

生成的 CSS 里只会出现 .btn-primary 和 .btn-secondary，但它们共享 %btn-base 的样式。

为什么用 %placeholder 而不是普通类？

避免生成不必要的 CSS 代码
明确只有被继承时才产生样式
方便写抽象的基类样式

用 %placeholder 定义基础样式，确保不生成无用的类选择器，减少样式体积。它比直接写通用类更“干净”，代码更加模块化。

🌟 BEM + SCSS 是如何结合的

BEM（Block Element Modifier）是一套命名规范，能帮助我们写出结构清晰、可维护的 CSS。

BEM 的命名格式通常是：

.block {}
.block__element {}
.block--modifier {}

结合 Scss，可以用嵌套语法来写 BEM，更直观。

举例：

.card {
    background: #f4f4f4;
    border-radius: 6px;
    padding: 20px;

    &__title {
        font-size: 20px;
        font-weight: bold;
    }

    &__content {
        margin-top: 10px;
        font-size: 14px;
    }

    &--highlighted {
        border: 2px solid #3498db;
    }
}

.card {
    background: #f4f4f4;
    border-radius: 6px;
    padding: 20px;
}
.card__title {
    font-size: 20px;
    font-weight: bold;
}
.card__content {
    margin-top: 10px;
    font-size: 14px;
}
.card--highlighted {
    border: 2px solid #3498db;
}

这里 .card__title 和 .card__content 是 .card 的元素，.card--highlighted 是 .card 的修饰符。

结合 BEM，Scss 的嵌套语法帮我们减少重复写 .block，让代码结构层次清晰，易于维护。

BEM + SCSS 的代码组织小技巧

块（Block）作为最外层选择器
元素（Element）用 &__xxx 嵌套写法
修饰符（Modifier）用 &--xxx 嵌套写法
组成模块时，把一个 Block 作为一个 SCSS 文件／模块

🧾 小节总结

使用 @extend 可以继承已有选择器样式，避免重复代码，写出干净样式。
%placeholder 是定义不会单独生成代码的占位符，和 @extend 搭配写出高复用基础样式。
BEM 规范结合 Scss 嵌套写法，结构清晰，代码易读维护。
合理拆分 SCSS 文件模块，提升项目可维护性和扩展性。

❓ 知识问答（Q&A）

Q：@extend 和 %placeholder 有什么区别？

A：@extend 是继承机制，任何选择器都可以被继承。而 %placeholder 是定义一个不会单独生成选择器的占位符，只能被继承，避免无用代码。

Q：BEM 结合 SCSS 嵌套有什么好处？

A：减少了重复写长类名，提高代码层次感，结构更直观，方便维护和团队协作。

Q：拆分 SCSS 文件的原则有哪些？

A：基础样式和变量放 base，组件分模块，布局相关放 layout，页面样式单独文件，主入口导入所有模块。

🧪 小练习

练习 1：用 `@extend` 和 `%placeholder` 写一个按钮组样式

创建 %btn-base 占位符，写基础按钮样式。然后写 .btn-primary 和 .btn-danger 继承它，并分别定义不同的背景色和悬停效果。

%btn-base {
    /* 基础按钮样式写这里 */
}

.btn-primary {
    /* 继承 %btn-base，写主按钮颜色 */
}

.btn-danger {
    /* 继承 %btn-base，写警告按钮颜色 */
}

练习 2：用 BEM 和 Scss 嵌套写一个卡片组件

写一个 .card 块，包含 .card__header 和 .card__body 元素，和一个修饰符 .card--featured 改变卡片边框颜色。

.card {
    /* 卡片基础样式 */

    &__header {
        /* 标题样式 */
    }

    &__body {
        /* 内容样式 */
    }

    &--featured {
        /* 特色卡片修饰符 */
    }
}

🎉 恭喜你已经掌握 Scss 的 @extend、%placeholder、BEM 结合 Scss 以及模块化拆分的技能啦！用这些技巧写出的代码会更清晰、更易维护，快去实践吧！

Mixin 与函数详解

通过 Scss 的 Mixin 和函数，掌握样式复用与可配置的秘诀，让你的 CSS 更高效且灵活。

SCSS 流程控制与逻辑语法

通过 @if、@else 和循环语法，动态生成样式，打造灵活高效的前端样式代码