在 SASS 中使用 @import 和 @extend
SASS 是一种流行的 CSS 预处理器，它提供了很多便利的语法和功能，可以帮助前端开发者更高效地写 CSS。其中最常用的两个语法就是 @import 和 @extend。
@import 语法可以将多个 SASS 文件合并成一个 CSS 文件，让代码更加模块化，方便管理和维护。而 @extend 语法则可以将一个选择器的样式扩展到另一个选择器上，减少代码重复，使 CSS 更加简洁。
下面分别介绍 @import 和 @extend 的用法和注意事项。
@import 使用 @import 将多个 SASS 文件合并成一个 CSS 文件，可以让 CSS 文件更加有组织性和可读性。这个语法接受一个文件路径作为参数，这个文件路径可以是相对路径或绝对路径。
例如，在一个名为 styles.sass 的文件中，我们可以用以下语法引入其他文件：
@import 'reset' @import 'layout' @import 'header' @import 'footer'
在这个例子中，reset.sass、layout.sass、header.sass 和 footer.sass 都是相对于 styles.sass 文件所在的路径的文件。这样，当我们编译 styles.sass 文件时，它们会被自动合并成一个 CSS 文件。
需要注意的是，如果一个 SASS 文件中只包含变量或 mixin，那么在引入它时就不会产生任何 CSS 输出。这种文件通常被称为 partials，文件名以 _ 开头，例如 variables.sass， mixins.sass 等。我们可以使用 @import 引入这些 partials，但不会生成额外的 CSS 文件。
@extend 使用 @extend 语法将一个选择器的样式扩展到另一个选择器上，可以减少代码重复，使 CSS 更加简洁。这个语法接受一个选择器作为参数。
例如，在一个名为 buttons.sass 的文件中，我们可以定义一个基本的按钮样式：
.button border: 1px solid #ccc padding: 5px 10px font-size: 14px cursor: pointer
然后，在另一个名为 login.sass 的文件中，我们可以使用 @extend 语法扩展这个样式：
.login-button @extend .button background-color: #f00 color: #fff
在这个例子中，.login-button 选择器会继承 .button 选择器的所有样式，并且可以覆盖其中的属性。编译后的 CSS 代码如下：
-- -------------------- ---- ------- -------- ------------- ------- --- ----- ---- -------- --- ---- ---------- ---- ------- ------- ------------- ----------------- ---- ------ ----
需要注意的是，@extend 语法会将样式合并在一起，可能会导致复杂的选择器结构和不必要的代码重复。因此，只有在可以确保样式不会被覆盖或混淆的情况下，才应该使用 @extend。同时，我们应该尽可能地避免使用复杂的选择器结构，以便更好地使用 @extend 语法。
总结 在 SASS 中，@import 和 @extend 是两个常用的语法，可以帮助我们更高效地编写 CSS，提高代码的可维护性和重用性。但是，我们需要注意它们的使用场景和注意事项，以确保样式的正确性和可读性。
示例代码
styles.sass 文件：
@import 'reset' @import 'layout' @import 'header' @import 'footer'
reset.sass 文件：
html, body, ul, ol margin: 0 padding: 0
layout.sass 文件：
.container max-width: 960px margin: 0 auto
header.sass 文件：
header background-color: #ccc height: 50px
footer.sass 文件：
footer background-color: #999 height: 30px
buttons.sass 文件：
-- -------------------- ---- ------- ------- ------- --- ----- ---- -------- --- ---- ---------- ---- ------- ------- ------------- ------- ------- ----------------- ---- ------ ----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e56a93f6b2d6eab30d96b9