Css Less~“…”语法意义

我在浏览网页时遇到过~符号在LESS中使用，我对它的作用有一个大致的了解，但是有人能说清楚吗，或者给我指一些文档，因为我找不到任何文档

据我所知，它从字符串周围删除了“字符”

比如说，我现在的工作比较少

_无变量

@onMobile:'最大宽度：768px'

_无样式

上述代码输出

@介质“最大宽度：768px”

这就破坏了我的CSS。但如果在我的_变量中，我做的更少

@onMobile:~'max-width:768px'

相反，它输出

@介质最大宽度：768px

这样就行了

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

LESS中的~用于按原样解释它后面的字符串。无需对其进行任何调整。这是因为LESS解析文件，如果执行以下简化示例，可能会遇到错误

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

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

转换2x的目的是在2秒内将一个元素转换到一个新维度

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

一个在LESS的新手可能会想，哦，让我们看看如果我们在它周围加上引号，它是否会被修复

但是，当解析较少时，我们得到以下CSS规则作为最终结果

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

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

这就是~的作用所在。如果我们把它加在带引号的字符串前面

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

然后我们说，嘿，fam，我想让你从字面上看，不要解析它。最终的结果是

transition: width 2s, height 2s;

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

---

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

LESS中的波浪线去掉了唯一使用的引号？如果它不是LESS语法本身的一部分，它当然也可以代表一般同级组合符。但在这种情况下，这并不是针对LESS的。看，这是可怕的古老虐待技术。要将逗号分隔的值作为一个参数传递，只需使用。从来没有可怕的值->带引号的字符串->不带引号的字符串转换。@我只回答了这个问题。我甚至没有对此发表意见。人们可以使用string函数来解决这个问题。如果你想要一个没有问题的答案，你只需要解释Less不能将max width:768px解析为一个合适的变量值。因此，有必要在那里进行研究。mixin参数中的逗号是一个不好的例子。关键是你根本不应该在宽度2s、高度2s的值中使用任何引号，因此在你的例子中不需要任何~…、~''''..、e或类似的污点。您的transition mixin调用应为。transition2xwidth 2s，height 2s；；这样，逗号就不会被解释为mixin参数分隔符。我总是毫无条件地对宣传~语法的答案/评论投不合理的反对票。不幸的是，这一混乱局面在早些时候传播得太广，因此即使在~6…7年后，黑客变得过时，人们也必须非常严厉地处理它。

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

transition: width 2s, height 2s;