是否有任何(好的)方法可以在Mixin中扩展类，然后使用Less在媒体查询中使用该Mixin? [英] Is there any (good) way to extend a class within a mixin, and then use that mixin within a media query, using Less?
问题描述
我一直在努力构建一些Less文件，以帮助加快CSS工作流程，并帮助产生更高效，更清洁的CSS.
I've been working on building out some Less files to help speed up my CSS workflow, and also to help produce more efficient, cleaner CSS.
我的看法:
- Mixins 是帮助加快工作流程的好方法，但是它们的缺点是可能会使输出的CSS变得比必要的时间更长.
- 扩展类是确保最小化样式重复声明数量的理想解决方案，有助于清理...
- Mixins are a great way to help speed up the workflow, but they have the drawback of potentially making the outputted CSS longer than necessary.
- Extending classes is the ideal solution for ensuring the amount of duplicate style declarations is minimized, helping clean that up...
因此，为了帮助保持平衡，我使用 dummy类编写了一组标准的常用样式(它们存储在通过引用导入的文件中，因此样式仅输出，如果他们得到扩展). 我将所有的Mixins设置为尽可能扩展这些类，这在大多数情况下都非常有效.
So, to help balance things out I wrote out a set of standard, commonly used styles, using dummy classes (they are stored in a file which is imported by reference, so the styles are only output if they get extended). I set all of my Mixins to extend these classes wherever possible, which worked great for the most part.
但是，一旦进入媒体查询，我就意识到了自己的陷阱... 我无法在媒体查询中扩展这些类，通常这是可以的，我只记得不要这样做.但是由于Mixins现在也使用了我的扩展，因此我现在也不能再在媒体查询中使用它们.
However, I realized my pitfall once I got to my media queries... I can't extend those classes within the media query, which would be fine normally, I would just remember not to do so.. But since the Mixins also now use my extends, I can now no longer use them inside media queries either.
因此，我不愿意避免在媒体查询中使用Mixins，但是我非常希望能够找到一种在其中继续扩展类以保持输出尽可能整洁的方法.
I'm not willing to avoid using the Mixins inside of the media queries because of this, but I'd really love to be able to find a way to keep extending classes within them to keep my output as clean as possible.
到目前为止，我唯一想到的想法是向每个Mixin添加一个额外的参数以指定是否应扩展它，但这并不理想.
The only idea I've thought of so far is to add an extra parameter to every Mixin to specify wether it should extend or not, but that's less than ideal.
我希望有人能提出一个更聪明的解决方案，使我能够保持Mixins的优势，它可以扩展基本样式类，而且还可以保持易用性，而不会使事情复杂化.可能是一个艰巨的任务，但这是希望.
My hope is that someone can come up with a much more clever solution, that would allow me to maintain the benefit of Mixins which extend base style classes, but also maintain easy usability, without over complicating things. Might be a tall order, but here's hoping.
如果我的解释难以理解，这是我希望能够做到的，但目前尚不可能:
// 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;
}
}
推荐答案
简而言之，是的，当前是有可能的，但是需要对顶级类进行一些其他包装:
In short, yes, currently it is somewhat possible but requires some additional wrapping for a top level classes:
// 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();
}
}
