Question

我正在使用一个小的内部实用程序库，但是遇到了我不喜欢的东西。

假设我要创建一些基本类，然后再创建相同的类，但用于响应式使用。

一个非常基本的例子是：

@for $i from 0 through $loopCount {
    .pt-#{$i} {
        padding-top: size($i);
    }
}

@for $i from 0 through $loopCount {
    @media all and (max-width: 576px) {
        .sm\:pt-#{$i} {
            padding-top: size($i);
        }
    }
}

@for $i from 0 through $loopCount {
    @media all and (max-width: 768px) {
       .md\:pt-#{$i} {
            padding-top: size($i);
        }
    }
}

如果我将该系统应用于更多的属性类，它将变得难以管理且混乱。

理想情况下，我希望将所有间距实用程序（边距和填充）放在一个仅包含初始类的文件中：

.pt-#{$i} {
    padding-top: size($i);
}

然后将该文件导入执行循环的全局文件中，例如

@for $i from 0 through $loopCount {
    @import "_spacing";
    @import "_borders";
}

@for $i from 0 through $loopCount {
    @media all and (max-width: 576px) {
        @import "_spacing";
        @import "_borders";
    }
}

但是，@import不能在循环中使用。我可以用SASS做到这一点吗？

我还将对响应类进行“前缀”，因此命名不是问题，而更重要的是能够在多个循环中使用同一组类。

编辑：使用mixin我已经实现了我想要的，这现在是我拥有的一个例子：

@import "groups/_spacing";
@import "groups/_flex";

.u\: {
    @include flex();

    @for $i from 0 through $loopCount {
        @include spacing($i);
    }
}

.u\@sm\: {
    @media all and (max-width: $breakpoint-small) {
        @include flex();

        @for $i from 0 through $loopCount {
            @include spacing($i);
        }
    }
}

我现在希望进一步减少重复，但这比我以前做的要好得多。

将相同的样式/文件导入多个SASS循环

0 个答案: