在本章节中，我们将深入了解 Stylus 中的 @extend 功能。这个功能是 CSS 预处理器中一个非常强大的特性，它允许你创建和复用样式块，从而避免代码重复并提高项目的可维护性。
什么是 @extend
@extend 允许你将一个选择器的样式扩展到另一个选择器上。这意味着你可以定义一组基础样式，并在其他地方通过 @extend 来使用这些样式。这种方式不仅让代码更加整洁，还可以减少重复代码，使你的样式表更易于维护。
示例：基础用法
假设我们有一个按钮的基本样式：
.base-button
background-color #007bff
color white
padding 10px 20px
border-radius 5px如果我们想要创建一个新的按钮样式，但又想保留 .base-button 的大部分样式，可以通过 @extend 来实现：
.big-button
@extend .base-button
font-size 20px
padding 15px 30px在这个例子中，.big-button 将会继承 .base-button 的所有样式，并且增加一些自定义的样式。编译后的 CSS 可能看起来像这样：
-- -------------------- ---- -------
------------- ----------- -
----------------- --------
------ ------
-------- ---- -----
-------------- ----
-
----------- -
---------- -----
-------- ---- -----
-可以看到，.big-button 的样式包括了 .base-button 的所有样式以及它自己的额外样式。
深入了解 @extend
虽然 @extend 看起来简单，但它有一些重要的细节需要注意，以确保你的代码既高效又可维护。
优先级问题
当你使用 @extend 时，被扩展的选择器会被插入到目标选择器中，这可能会导致样式优先级的变化。例如，如果你有如下样式：
.base-button
background-color #007bff
color white
.warning-button
@extend .base-button
background-color #ff0000编译后的 CSS 可能是这样的：
.base-button, .warning-button {
background-color: #007bff;
color: white;
}
.warning-button {
background-color: #ff0000;
}在这个例子中，.warning-button 的背景颜色是红色的，因为它在后面定义，具有更高的优先级。然而，.warning-button 同时也继承了 .base-button 的颜色样式，因为 .base-button 的样式在前面定义。
多重扩展
你也可以在一个选择器中同时扩展多个选择器，例如：
-- -------------------- ---- -------
-------------
------- ----
--------------- -------------
-------------
------- -------------
----- ---
------- ---- ----
--------- ----
-------------
------- -------------
----- ---
------- ---- ----
--------- ----在这个例子中，.large-button 和 .small-button 都扩展了 .button-group 的样式，并添加了自己的特定样式。这使得我们可以很容易地为不同大小的按钮定义一致的基础样式，而不需要重复代码。
使用占位符选择器
在某些情况下，你可能希望只在某个地方使用扩展，而不是在整个项目中都应用它。在这种情况下，可以使用占位符选择器（以 % 开头）来定义样式：
-- -------------------- ---- -------
--------------
---------------- -------
----- -----
------- ---- ----
------------- ---
-----------
------- --------------
--------- ----
------- ---- ----在这个例子中，%common-button 是一个占位符选择器，只有当它被扩展时才会生效。这有助于保持代码的整洁，并避免不必要的重复。
总结
@extend 是 Stylus 中一个强大且有用的工具，它可以帮助你保持代码的整洁、减少重复，并提高项目的可维护性。通过合理使用 @extend，你可以创建模块化和可重用的样式块，从而使你的前端项目更加高效和易于管理。