css，用@media改变较少的变量

Question

我目前正在进行一个网站元素，该元素响应迅速且 less 确实帮了很多忙。

但我希望大小变量根据窗口大小而改变。我试过下面的代码，但它似乎不起作用。这可能吗，还是我应该尝试另一种方法？

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  @menu-width: 100px // smaller size
}

.menu {
  width: @menu-width;
}

Answer 1

因为我似乎没有得到很多支持将其关闭为 this question 的副本，我基本上会重复我的回答(有一些变化)。

记住 @media 是 CSS 查询，而不是 LESS 查询

@media 查询是一种 CSS 功能，它允许当前加载的 CSS 响应它正在呈现的媒体(通常是某种类型的浏览器，但也可以是打印等)。

LESS 是一个 CSS 预处理器，它在加载到浏览器之前创建 CSS，因此在加载之前媒体一直在被检查(这是在 LESS 生成后在 CSS 本身中完成的)。

所以 LESS 的正确方法是与直接 CSS 具有相同类型的输出，这意味着您必须在 @media 查询中重复 .menu 选择器因此它的值会随着媒体类型的变化而变化。

最终的 CSS 输出应该是这样的

@media only screen and (max-width: 400px) {
  .menu {
    width: 100px; 
  }
}

.menu {
  width: 300px;
}

有多种方法可以使用 LESS 生成类似的东西。严格按照上面的基本格式，是这样的:

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  .menu {
    width: @menu-width - 200px; /* assuming you want it dynamic to default */
  }
}

.menu {
  width: @menu-width;
}

但也要看看:

• 关于 LESS 媒体查询的基本思想:How can I use media queries more efficiently with LESS?
• 有关对媒体查询进行分组和减少选择器代码重复的讨论，请参阅:Media Query grouping instead of multiple scattered media queries that match