SASS @import函数有什么用？

在 SASS 中，@import 函数是一个非常有用的工具，可以帮助我们在编写样式表时更加方便和灵活。

什么是 @import 函数？

@import 函数是 SASS 提供的一种导入外部样式表的方式。与 HTML 中的 <link> 标签不同，使用 @import 函数可以直接在 SASS 文件中导入其他 SASS 或 CSS 文件，并将其合并到当前样式表中。

@import 函数的用途

使用 @import 函数可以带来以下几个方面的好处：

模块化

在大型项目中，CSS 样式表往往包含很多代码，难以维护。使用 @import 函数可以将样式表拆分为多个模块，每个模块专门处理一个特定的功能，使得样式表更加模块化，易于维护。

// app.scss
@import 'header';
@import 'sidebar';
@import 'footer';

重用

使用 @import 函数，我们可以将一些通用的样式集中在一个文件中，然后在需要的地方导入。这样会大大降低代码重复率，提供代码的重用性。

// variables.scss
$primary-color: #1abc9c;
$secondary-color: #2c3e50;

// app.scss
@import 'variables';
.btn {
  background-color: $primary-color;
  color: $secondary-color;
}

嵌套规则

在 SASS 中，我们可以使用嵌套规则来组织样式表，使得样式表更容易理解和维护。@import 函数可以让我们在不同的文件中使用嵌套规则，进一步提高代码的组织性和可读性。

// app.scss
@import 'header';
@import 'sidebar';

// header.scss
.header {
  background-color: #f2f2f2;
  height: 50px;
  .logo {
    font-size: 24px;
  }
  .nav {
    display: flex;
    .menuItem {
      padding: 10px;
    }
  }
}

// sidebar.scss
.sidebar {
  width: 200px;
  background-color: #333;
  color: #fff;
  .nav {
    .menuItem {
      padding: 10px;
    }
  }
}

总结

@import 函数是 SASS 中非常有用的工具，它可以帮助我们更好地组织和管理样式表，提高代码的可读性和可维护性。在实际开发中，建议尽可能地使用 @import 函数。