CSS-包含

在CSS中，很常见需要在多个位置上用到相同的样式代码，这些代码可能包含较多的属性和值，复制/粘贴代码将大大增加代码维护的困难度。为了解决这个问题，CSS提供了“包含”的方式来共享样式代码。

使用 @import 包含

使用@import规则，可以将一个CSS文件包含到另一个CSS文件中。被包含的CSS代码将整个插入到导入语句所在位置的CSS文件中。

/* master.css 文件 */
@import "common.css";

/* common.css 文件 */
h1 {
  color: red;
}

h2 {
  color: green;
}

上面的示例中，@import "common.css"; 将会把 common.css 文件中的所有样式导入到 master.css文件中。

需要注意的是，使用@import导入的CSS文件会在原始CSS文件被加载后再获取，因此会导致页面延迟加载和性能问题。

使用 包含

使用HTML <link> 元素也可以将一个CSS文件包含到HTML文件中。

<!-- 包含 common.css 文件 -->
<link rel="stylesheet" href="common.css">

<!-- 包含 styles.css 文件 -->
<link rel="stylesheet" href="styles.css">

使用<link> 的优点是它可以使浏览器并行加载多个文件，从而提高加载速度。

Sass Mixin

除了使用原生CSS的方式包含代码外，许多CSS预处理器（如Sass、Less等）也提供了“Mixin”机制，通过定义可重用的样式代码，使其可在其他样式中使用。

以下示例展示了如何使用Sass的Mixin机制：

/* 定义一个Mixin */
@mixin red() {
  color: red;
}

/* 在样式中使用Mixin */
h1 {
  @include red(); // 使用red() Mixin
}

p {
  @include red(); // 使用red() Mixin
}

结论

使用CSS的包含机制可以使样式代码更容易维护，减少不必要重复的代码，提高代码的可读性。不同的包含方式适用于不同情况，需要开发者根据实际需要进行选择。