css - 如何在 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。 map 是 LESS 3.5 中的新功能

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

Answer 1

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

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

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

此外，根据他们的文档，引入了 map :

Released v3.5.0

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

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

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

如果你点击“CSS(Less)”标题旁边的小向下箭头，你可以选择“查看编译的 CSS”，它会显示 LESS -> CSS 输出