Строки

@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 (даже символ новой строки!), можно включить в строку, поставив перед ним \.

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

@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 возвращает строку без кавычек \!.

• В противном случае добавляется экранирование Unicode в нижнем регистре с пробелом в конце. Например, \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

Другие строки без кавычек

Помимо идентификаторов, есть несколько необычных элементов синтаксиса CSS, которые разбираются как строки без кавычек. К ним относятся:

• Специальные функции, например url() и element(), аргументы которых имеют синтаксис, отличный от синтаксиса обычных выражений CSS.

• Токены диапазона Unicode, например U+0-7F или U+4??.

• Хеш-токены, значения которых являются идентификаторами, но не допустимыми шестнадцатеричными цветами.

• Значение %. (Оно доступно, только если не находится непосредственно между двумя другими значениями, иначе его можно было бы спутать с оператором остатка от деления.)

• Специальное значение !important.

@debug url(https://example.org); // url(https://example.org)
@debug U+4??; // U+4??
@debug #my-background; // #my-background
@debug %; // %
@debug !important; // !important

// SASS
@debug url(https://example.org)  // url(https://example.org)
@debug U+4??  // U+4??
@debug #my-background  // #my-background
@debug %  // %
@debug !important  // !important

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

В 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"