SASS 模板字符串。这是一种使用它们的方法吗？答案

【问题标题】：SASS template strings. Is it a way to use them?SASS 模板字符串。这是一种使用它们的方法吗？
【发布时间】：2019-04-25 21:54:22
【问题描述】：

也许这是一个微不足道的问题，但我没有找到任何关于 sass 模板字符串的信息，就像它具有的 less 语法一样：

less:@media-screen-phone: ~'screen and (max-width: 540px)';

下一个用法：

// ...some *.less file

@media-screen-phone: {
  // ... some style rules
}

// ...

那么，像我上面显示的那样，这是一种从less 到sass 使用这种方法的方法吗？

谢谢。

【问题讨论】：

标签： javascript css reactjs sass less

【解决方案1】：

LessCss 波浪号 (~) 'function' 只是一个助手：

注意我们的 CSS 属性值被引用了，这是我们不想要的。

这就是波浪号发挥作用的地方。如果在引用的值前面加上波浪号，标记仍将被分组为一个值，但引号将被删除。

这就是波浪号的全部作用——去掉引号。 它什么也不做。如果您当前使用波浪号，那么在一半的情况下您可能实际上并不需要它们。如果你像我一样，你[错误地]从在线演示中复制粘贴它们，而不知道它在做什么。

来自Thinking About Strings, Quotes, Tokens, And Tildes In Less CSS 的引用。像原来一样强调。

SCSS 的流行语是string interpolation

它的作用相同，但不是在定义时，而是在使用时。

// SCSS
$media-screen-phone: "screen and (max-width: 540px)";

@media #{$media-screen-phone} {
  body {
    color: red;
  }
}

【讨论】：

是的，我知道这种方法，但它与.less 中的不同。知道如何在没有附加规则的情况下使用它吗？
这个 SCCS 代码可能会让它更清晰$media-screen-phone: "screen and (max-width: 540px)";body { &:before { content: #{$media-screen-phone}; content: $media-screen-phone; content: "#{$media-screen-phone}";}}