Строки

@use "sass:string";

@debug string.unquote(".widget:hover"); // .widget:hover
@debug string.quote(bold); // "bold"

// SASS
@use "sass:string"

@debug string.unquote(".widget:hover")  // .widget:hover
@debug string.quote(bold)  // "bold"

Экранирование

Все строки Sass поддерживают стандартные CSS символы экранирования:

• Любой символ, кроме буквы от A до F или цифры от 0 до 9 (даже перевод строки!), может быть включен в строку путём записи \ перед ним.

• Любой символ может быть включен в строку путём записи \, за которым следует его числовой код Юникода, записанное в шестнадцатеричном формате. Вы можете добавить пробел после номера кода, чтобы указать, где заканчивается число Юникода.

@debug "\""; // '"'
@debug \.widget; // \.widget
@debug "\a"; // "\a" (a string containing only a newline)
@debug "line1\a line2"; // "line1\a line2"
@debug "Nat + Liz \1F46D"; // "Nat + Liz 👭"

// SASS
@debug "\""  // '"'
@debug \.widget  // \.widget
@debug "\a"  // "\a" (a string containing only a newline)
@debug "line1\a line2"  // "line1\a line2" (foo and bar are separated by a newline)
@debug "Nat + Liz \1F46D"  // "Nat + Liz 👭"

Заключённые в кавычки

Строки в кавычках записываются в одинарных или двойных кавычках, как в "Helvetica Neue". Они могут содержать интерполяцию, а также любые неэкранированные символы, за исключением:

• \, который можно экранировать как \\;
• ' или ", какой из них был использован для определения этой строки, которые можно экранировать как \' или \";
• переводы строки, которые можно экранировать как \a (включая последующий пробел).

Строки в кавычках гарантированно будут скомпилированы в CSS строки, содержащие то же содержимое, что и исходные строки Sass. Точный формат может отличаться в зависимости от реализации или конфигурации — строка, содержащая двойную кавычку, может быть скомпилирована в "\"" или '"', а не-ASCII символ может быть или не быть экранирован. Но это должно быть обработано одинаково во всех совместимых с CSS реализациях, включая все браузеры.

@debug "Helvetica Neue"; // "Helvetica Neue"
@debug "C:\\Program Files"; // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""; // "\"Don't Fear the Reaper\""
@debug "line1\a line2"; // "line1\a line2"

$roboto-variant: "Mono";
@debug "Roboto #{$roboto-variant}"; // "Roboto Mono"

// SASS
@debug "Helvetica Neue"  // "Helvetica Neue"
@debug "C:\\Program Files"  // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""  // "\"Don't Fear the Reaper\""
@debug "line1\a line2"  // "line1\a line2"

$roboto-variant: "Mono"
@debug "Roboto #{$roboto-variant}"  // "Roboto Mono"

Без кавычек

Строки без кавычек записываются как CSS идентификаторы, следуя диаграмме синтаксиса ниже. Они могут включать интерполяцию где угодно.

@debug bold; // bold
@debug -webkit-flex; // -webkit-flex
@debug --123; // --123

$prefix: ms;
@debug -#{$prefix}-flex; // -ms-flex

// SASS
@debug bold  // bold
@debug -webkit-flex  // -webkit-flex
@debug --123  // --123

$prefix: ms
@debug -#{$prefix}-flex  // -ms-flex

Экранирование в строках без кавычек

Совместимость (Нормализация):

Dart Sass

с версии 1.11.0

LibSass

✗

Ruby Sass

✗

➤

При разборе строки без кавычек, буквальный текст экранирования интерпретируется как часть строки. Например, \a разбирается как символы \, a и пробел. Однако, чтобы гарантировать, что строки без кавычек с одинаковым значением в CSS разбирались одинаково, эти экранирования нормализуются. Для каждой точки кода, будь она экранированной или нет:

• Если это допустимый символ идентификатора, он включается в строку без кавычек без экранирования. Например, \1F46D возвращает строку без кавычек 👭.

• Если это печатный символ, кроме перевода строки или табуляции, он включается после \. Например, \21 возвращает строку без кавычек \!.

• В противном случае, строка с экранированием Юникода в нижнем регистре включается с последующим пробелом. Например, \7Fx возвращает строку без кавычек \7f x.

@use "sass:string";

@debug \1F46D; // 👭
@debug \21; // \!
@debug \7Fx; // \7f x
@debug string.length(\7Fx); // 5

// SASS
@use "sass:string"

@debug \1F46D  // 👭
@debug \21  // \!
@debug \7Fx  // \7f x
@debug string.length(\7Fx)  // 5

Индексы строк

Sass имеет ряд функций для работы со строками, которые принимают или возвращают числа, называемые индексами, которые ссылаются на символы в строке. Индекс 1 указывает на первый символ строки. Обратите внимание, что это отличается от многих языков программирования, где индексы начинаются с 0! Sass также позволяет легко ссылаться на конец строки. Индекс -1 относится к последнему символу в строке, -2 — к предпоследнему и так далее.

@use "sass:string";

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.slice("Roboto Mono", -4); // "Mono"

// SASS
@use "sass:string"

@debug string.index("Helvetica Neue", "Helvetica")  // 1
@debug string.index("Helvetica Neue", "Neue")  // 11
@debug string.slice("Roboto Mono", -4)  // "Mono"