如何在 Less 中使用字符串插入映射值

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

这似乎有效：

@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

Answer 2

发生这种情况是因为 key[value] 实际上不是一个变量，变量是映射 @screen-size-min，因此您不能利用变量插值。一种解决方案是简单地将 KVP 与字符串的其余部分连接起来：

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

这消除了对创建另一个变量的任何依赖，只是为了对其进行插值

此外，根据他们的文档，引入了地图：

Released v3.5.0

而您测试的在线测试仪只支持2.7

Codepen 通常支持他们的最新版本。这是一个匿名笔演示：

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

如果你点击 'CSS (Less)' header 旁边的小向下箭头，你可以 select 'View Compiled CSS' 它会显示 LESS -> CSS输出

如何在 Less 中使用字符串插入映射值

How to interpolate a map value with string in Less

css

less