SASS шаблон строки. Это способ их использования?

Question

Может быть, это тривиальный вопрос, но я не нашел никакой информации о sass строки шаблона, как в less Синтаксис имеет:

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

со следующим использованием:

// ...some *.less file

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

// ...

Итак, это способ использовать такой подход из less в sass как я показал выше?

Благодарю.

Answer 1

LessCss тильда (~) "функция" является только помощником:

Обратите внимание, что значение нашего свойства CSS заключено в кавычки, чего мы не хотим.

Это где тильда вступает в игру. Если вы предшествуете указанному значению тильдой, токены все равно будут сгруппированы в одно значение, но кавычки будут удалены.

Это все, что делает тильда - лишать цитаты. Больше ничего не делает. Если вы используете тильды в настоящее время, вам, вероятно, не нужны они в половине случаев. Если вы чем-то похожи на меня, вы [неправильно] скопировали их из онлайн-демонстраций, фактически не зная, что они делают.

Цитата из размышлений о строках, кавычках, токенах и тильдах в меньшем CSS. Акцент как в оригинале.

Модное слово для SCSS - интерполяция строк

Он делает то же самое, но не во время определения, а во время использования.

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

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