Question

我似乎无法使我的LESS映射逻辑起作用。我已遵循documentation进行映射。

@screen-size-min: {
  mobile-small: 320px;
  mobile-large: 480px;
  tablet-small: 600px;
  tablet-large: 768px;
  desktop-small: 992px;
  desktop-large: 1280px;
}

@min: min-width;

@desktop-small-min: ~"only screen and (@{min}: @screen-size-min[desktop-small])";

p {
  color: blue;

  @media @desktop-small-min {
    color: red;
  }
}

我希望此代码可以编译为CSS，但是媒体查询似乎无法编译。

p {
  color: blue;
}

@media only screen and (min-width: 992px) {
  p {
    color: red;
  }
}

我尝试在lesstester上进行测试，但目前仅支持LESS 2.7。地图是LESS 3.5中的一项新功能

没有编译错误。我哪里出错了？

Answer 1

之所以会这样，是因为key[value]实际上不是变量，变量是映射@screen-size-min，因此您无法利用变量插值。一种解决方案是简单地将KVP与其余字符串连接起来：

@desktop-small-min: ~"only screen and (@{min}:" @screen-size-min[desktop-small] ~ ")";

这消除了创建另一个变量以进行插值的任何依赖

此外，根据他们的文档，还介绍了地图：

发布的v3.5.0

您测试过的在线测试仪仅支持 2.7

Codepen通常支持其最新版本。这是一支匿名笔，展示：

https://codepen.io/anon/pen/zeXmev

如果单击“ CSS（Less）”标题旁边的小向下箭头，则可以选择“ View Compiled CSS”，它会向您显示LESS -> CSS输出

Answer 2

这似乎有效：

@screen-size-min: {
  mobile-small: 320px;
  mobile-large: 480px;
  tablet-small: 600px;
  tablet-large: 768px;
  desktop-small: 992px;
  desktop-large: 1280px;
}

@min: min-width;
@mysize: @screen-size-min[desktop-small];

@desktop-small-min: ~"only screen and (@{min}: @{mysize})";

p {
  color: blue;

  @media @desktop-small-min {
    color: red;
  }
}

它产生期望的结果。试试here

较少如何使用字符串内插地图值

2 个答案: