gulp + combine-media-queries：选择顺序

Question

我在 LESS 项目中使用 Gulp（组合媒体查询），它按预期工作。但是，我需要为max-height 添加一个媒体查询，而Gulp 总是将max-height 放在媒体查询的较低位置，所以我可以用max-width 覆盖它而不使用!important 或向CSS 添加更多选择器.有谁知道控制 Gulp 吐出媒体查询的顺序的方法，或者一个结合媒体查询并给我控制权的 gulp 任务？

到目前为止，我已经尝试过 https://www.npmjs.com/package/gulp-combine-media-queries 和 https://www.npmjs.com/package/gulp-combine-mq。

我能够通过更改来操纵订单： @media (max-height:900px){} 到 @media (min-width:1024px) and (max-height:900px){} 但这感觉就像一个 hacky 解决方案。

Answer 1

您可以在 LESS 中创建 mixin，然后对于该 Class 或 Id，只需使用创建的 mixin 和您想要更改的属性。等等

.RoundBorders {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#menu {
  color: gray;
  .RoundBorders;
}