Question

在浏览网络时，我遇到了and中使用的~符号，我对它的功能有一个大致的了解，但是有人可以清楚地说明我或指向一些文档吗？，因为我找不到任何东西？

据我所知，它会删除字符串中的LESS个字符吗？

例如，我目前少了

_variables.less

'

_styles.less

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

上面的代码输出

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

然后破坏了我的CSS。但是如果在我的 _variables.less 中，我会

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

相反，它输出

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

然后有效。

有人可以说明该符号的确切作用以及是否有其他用途吗？

Answer 1

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

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

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

transition2x的目的是在2秒内将元素转换为新尺寸。

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

LESS中的入门者可能会想起

的“ 哦，让我们看看是否用引号引起来是否固定”。

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

但是，当解析LESS时，最终得到以下CSS规则

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

这不是我们想要的。它可能是有效的CSS（已解析），但动画关键帧不是以此为基础构建的。您得到的是尺寸突然跳动而没有任何动画。

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

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

然后我们说的是“更少”，“嗯，亲爱的，我希望您从字面上看这件事，不要解析它”。最终结果是

transition: width 2s, height 2s;

这是正确的CSS语法。这会添加动画关键帧。

这是~之前在任何字符串中所未包含的内容：“获取此字符串，不要解释它并去除其引号”。