在 Sass 中，你可以使用嵌套导入（Nested Importing）来更方便地导入多个相关的文件。嵌套导入允许你通过一个导入语句导入一个文件夹，而不需要一个个列举所有的文件。以下是嵌套导入的基本示例：
1. 文件夹结构
假设你有以下的文件夹结构：
styles/
sass 教程：3-3. 嵌套导入
|-- base/
| |-- _variables.scss
| |-- _mixins.scss
|-- components/
| |-- _buttons.scss
| |-- _forms.scss
|-- main.scss
2. 嵌套导入
main.scss
// main.scss
@import 'base';
@import 'components';
body {
font: $font-stack;
color: $primary-color;
@include rounded-corners;
}
在这个例子中，通过 @import 'base'; 和 @import 'components'; 语句嵌套导入了 styles/base 和 styles/components 文件夹下的所有 Sass 文件。
3. 文件夹下的文件
base/_variables.scss
// base/_variables.scss
$primary-color: #3498db !default;
$font-stack: 'Helvetica Neue', sans-serif !default;
base/_mixins.scss
// base/_mixins.scss
@mixin rounded-corners {
border-radius: 5px;
}
components/_buttons.scss
// components/_buttons.scss
.button {
background-color: $primary-color;
@include rounded-corners;
}
components/_forms.scss
// components/_forms.scss
input {
border: 1px solid $primary-color;
@include rounded-corners;
}
通过嵌套导入，你可以更清晰地组织和管理项目中的样式模块，减少导入语句的数量，提高代码的可读性和可维护性。在实际项目中，尤其是大型项目中，嵌套导入是一种有效的组织样式表的方式。
转载请注明出处：http://www.zyzy.cn/article/detail/4332/sass