Question

我一直致力于构建一些Less文件，以帮助加快我的CSS工作流程，并帮助生成更高效，更清晰的CSS。

我看待它的方式：

Mixins 是帮助加快工作流程的好方法，但它们的缺点是可能会使输出的CSS超出必要的时间。
扩展类是确保最小化重复样式声明数量的理想解决方案，有助于清理它......

所以，为了帮助平衡问题，我使用虚拟类写出了一组标准的常用样式（它们存储在一个通过引用导入的文件中，所以样式只是输出，如果他们得到扩展）。我将所有的Mixins设置为尽可能扩展这些类，这在大多数情况下都很有用。

然而，一旦我接触到媒体查询，我意识到了我的陷阱...... 我无法在媒体查询中扩展这些类，这通常很好，我会记得不要这样做..但是由于Mixins现在也使用我的扩展，我现在也不能再在媒体查询中使用它们了。

由于这一点，我不愿意避免在媒体查询中使用Mixins，但我真的很想能够找到一种方法来继续扩展其中的类以保持我的输出为尽可能干净。

到目前为止我唯一想到的想法是为每个Mixin添加一个额外的参数来指定它应该延伸还是不延伸，但这并不理想。

我希望有人可以提出一个更聪明的解决方案，这将使我能够保持Mixins的优势，扩展基本风格类，同时保持简单的可用性，而不会使事情变得复杂。可能是一项艰巨的任务，但是希望能有所帮助。

如果我的解释难以理解，这是我希望能够做到的，但目前无法做到：

理想输入

// extensions.less

.block {
    display: block;
}

// mixins.less

@import (reference) "extensions";

.mixin {
    &:extend(.block);
    margin: auto;
}

// styles.less

@import "mixins";

.element1 {
    .mixin();
}
.element2 {
    .mixin();
}

@media only screen and (max-width: 768px) {

    .element3 {
        .mixin();
    }
    .element4 {
        .mixin();
    }

}

理想输出

// styles.css

.element1, .element2 {
    display: block;
}
.element1 {
    margin: auto;
}
.element2 {
    margin: auto;
}

@media only screen and (max-width: 768px) {

    .element3, .element4 {
        display: block;
    }
    .element3 {
        margin: auto;
    }
    .element4 {
        margin: auto;
    }

}

Answer 1

简而言之，是的，目前它有些可能，但需要为顶级课程提供一些额外的包装：

// extensions.less

.block {
    display: block;
}

// mixins.less

@import (reference) "extensions";

.mixin() {
    &:extend(.block);
    margin: auto;
}

// styles.less

@media all { // !

    @import "mixins";

    .element1 {
        .mixin();
    }
    .element2 {
        .mixin();
    }
}

@media only screen and (max-width: 768px) {

    @import (multiple) "mixins";

    .element3 {
        .mixin();
    }

    .element4 {
        .mixin();
    }
}

.element1和.element2（以及任何其他要扩展.block的类）必须放入@media all，因为currently：

顶级扩展匹配包括嵌套媒体内的选择器在内的所有内容

因此，如果.element1和.element2保留在全局范围内，则会泄漏到其他所有@media .block声明中。

（嗯，实际上对我来说这是＆＃34;顶级延伸匹配所有内容＆＃34;事情看起来有问题并且与另一个相矛盾？＃34;媒体声明中的扩展应该只匹配同一媒体声明中的选择器＆＃34;规则（显然因为global scope = @media all因此它们应该完全相同））。

是否有任何（好的）方法在mixin中扩展类，然后在媒体查询中使用mixin，使用Less？

理想输入

理想输出

1 个答案: