少〜'...'语法含义[重复]

Question

我在浏览网页时遇到了LESS 中使用的~ 符号，我对它的作用有一个大致的了解，但是有人可以说清楚或指出一些文档，我可以没找到？

据我所知，它会从字符串中删除 ' 字符？

比如我现在的less

_variables.less

@onMobile: '(max-width: 768px)';

_styles.less

.my-button {
  @media @onMobile {
     width:100%;
  }
}

以上代码输出

@media '(max-width: 768px)';

这会破坏我的 CSS。但如果在我的 _variables.less 我愿意

@onMobile: ~'(max-width: 768px)';

相反，它输出

@media (max-width: 768px);

然后工作。

有人可以澄清一下这个符号的确切作用以及它是否还有其他用途吗？

Answer 1

LESS 中的~ 用于解释其后面的字符串。无需对其进行任何调整。那是因为LESS会解析文件，如果你执行以下操作可能会遇到错误（简化示例）；

.transition2x( @props ) {
  transition: @props;
}

.element {
  .transition2x(width 2s, height 2s)
}

transition2x 的目的是在 2 秒内将元素转换到新维度。

但是，在LESS中解析上述块时，会遇到语法错误。罪魁祸首就是上面那个小,。 LESS 将该字符作为参数的分隔符，因此它认为 .transition2x 有两个参数。但只有一个预期。所以LESS不知道该怎么办。

LESS 的初学者可能会想“哦，让我们看看如果我们在它周围加上引号，它是否会得到修复” by

.element {
  .transition2x("width 2s, height 2s")
}

但是，当解析 LESS 时，我们得到以下 CSS 规则的最终结果

transition: "width 2s, height 2s";

这不是我们想要的。它可能是一个有效的 CSS（被解析），但动画关键帧不是用它构建的。你得到的是一个没有任何动画的突然的维度跳跃。

这就是~ 发挥作用的地方。如果我们将它添加到引用字符串的前面，

.element {
  .transition2x(~"width 2s, height 2s")
}

然后我们说的是“嘿，fam，我希望你从字面上看这个，不要解析它”。最终结果是

transition: width 2s, height 2s;

这是正确的 CSS 语法。这增加了动画关键帧。

这就是 ~ 在 LESS 中任何字符串之前所做的：“获取此字符串，不要解释它并去掉它的引号”。