使用媒体查询中的类集作为更少的mixin

Posted 2023-03-06

【中文标题】使用媒体查询中的类集作为更少的mixin

【英文标题】：Using class set in media query as mixin in less

【发布时间】：2013-01-01 06:49:16

【问题描述】：

我正在尝试将媒体查询中设置的一组类作为 mixin 重用，以在整个网站中使用，而不是在 html 中嵌入非语义的类名。

这是我的问题的一个例子。

@media (min-width: 1000px) 

    .foowidth:120px;
    .foo-2width:150px;

@media (max-width: 999px) 

    .foowidth:110px;
    .foo-2width:120px;


.bar.foo;
.bar-2.foo;
.bar-3.foo-2;

.bar-X 永远不会应用任何样式。我可以猜测这是因为 LESS 不会在媒体查询中创建 .bar-X，所以什么都不会被应用。

这是 LESS 中的错误，还是我永远无法实现的？一个解决方法将是理想的。

【问题讨论】：

在媒体查询部分上方声明 .foo 怎么样，然后媒体查询将覆盖属性，它会下降到你的 bar-X 选择器？

【参考方案1】：

您的问题是一个常见的误解。 LESS 不处理@media 查询，浏览器在LESS 完成其工作后。 LESS 只能创建浏览器将要读取的 CSS 代码。所以@media 对 LESS 来说是“无意义的”，它就像任何其他选择器（.someClass div table 等）一样，它只处理 @media 将提供给浏览器的内容。

这意味着您需要将所有为@media 更改的代码放在@media 块中。但是你也不想要一堆重复的代码。因此，请创建一个主 mixin 来设置您的 @media 代码，然后从媒体查询中调用该 mixin：

.makeFooGroup(@w1, @w2) 
    .foo width: @w1
    .foo-2width: @w2
    .bar.foo
    .bar-2.foo
    .bar-3.foo-2


@media (min-width: 1000px) 
    .makeFooGroup(120px, 150px);

@media (max-width: 999px) 
    .makeFooGroup(110px, 120px);

生成这个 css：

@media (min-width: 1000px) 
  .foo width: 120px;
  .foo-2 width: 150px;
  .bar width: 120px;
  .bar-2 width: 120px;
  .bar-3 width: 150px;

@media (max-width: 999px) 
  .foo width: 110px;
  .foo-2 width: 120px;
  .bar width: 110px;
  .bar-2 width: 110px;
  .bar-3 width: 120px;

有关我在 LESS 和 @media 上提供的与此相关的更多信息，请参阅：

CSS pre-processor with a possibility to define variables in a @media query Media Query grouping instead of multiple scattered media queries that match

【讨论】：

很好的答案，我现在就试试。我曾认为问题在于 LESS 对媒体查询并不“聪明”，并理解人们试图实现的目标。我希望 LESS 足够聪明，可以创建所有在媒体查询本身中引用媒体查询的语句，而用户不必这样做。

只要设置好它就可以完全按照我的意愿工作。我在“makeFooGroup”mixin 中添加了一些 mixin，以根据所需的参数动态创建宽度，这些参数完美地工作。唯一的缺点是每当我想设置网格时，它都需要在这个 mixin 主目录中完成，但这可以被视为一个积极的方面，因为它迫使所有主要的网格都在一个区域中可见。非常感谢。