Интерполяция
Вы также можете использовать переменные SassScript в селекторах и в названиях свойств используя синтаксис #<> интерполяции:
$name: foo; $attr: border; p.# # -color: blue; > $name: foo $attr: border p.# #-color: blue p.foo border-color: blue; > Также можно использовать #<> , чтобы вставить в SassScript значение свойств. В большинстве случаев это не лучше, чем любой другой способ, но использование #<> означает, что любые операции в нем будут рассматриваться как запись CSS. Например:
p $font-size: 12px; $line-height: 30px; font: # /# ; > p $font-size: 12px $line-height: 30px font: # /# p font: 12px/30px; > Интерполяция
Интерполяцию можно использовать практически в любом месте таблицы стилей Sass, чтобы встроить результат выражение SassScript в фрагмент CSS. Просто заключите выражение в #<> в любом из следующих мест:
- Селекторы в правилах стиля
- Имена свойств в объявлениях
- Значения настраиваемых свойств
- CSS at-rules
- @extend
- Обычный CSS @import ы
- Строки в кавычках или без кавычек
- Специальные функции
- Простые имена функций CSS
- Громкие комментарии
SCSS Syntax
@mixin corner-icon($name, $top-or-bottom, $left-or-right) .icon-#$name> background-image: url("/icons/#$name>.svg"); position: absolute; #$top-or-bottom>: 0; #$left-or-right>: 0; > > @include corner-icon("mail", top, left); Sass Syntax
@mixin corner-icon($name, $top-or-bottom, $left-or-right) .icon-#$name> background-image: url("/icons/#$name>.svg") position: absolute #$top-or-bottom>: 0 #$left-or-right>: 0 @include corner-icon("mail", top, right) CSS Output
.icon-mail background-image: url("/icons/mail.svg"); position: absolute; top: 0; left: 0; > В SassScript permalink В SassScript
Совместимость (Modern Syntax):
Ruby Sass since 4.0.0 (unreleased)
LibSass и Ruby Sass в настоящее время используют старый синтаксис для анализа интерполяции в SassScript. Для большинства практических целей он работает так же, но может вести себя странно с операторами. Смотрите этот документ для получения подробной информации.
В SassScript можно использовать интерполяцию для внедрения SassScript в [строки без кавычек]unquoted strings. Это особенно полезно при динамическом создании имен (например, для анимации) или при использовании значений, разделенных косой чертой. Обратите внимание, что интерполяция в SassScript всегда возвращает строку без кавычек.
SCSS Syntax
@mixin inline-animation($duration) $name: inline-#unique-id()>; @keyframes #$name> @content; > animation-name: $name; animation-duration: $duration; animation-iteration-count: infinite; > .pulse @include inline-animation(2s) from background-color: yellow > to background-color: red > > > Sass Syntax
@mixin inline-animation($duration) $name: inline-#unique-id()> @keyframes #$name> @content animation-name: $name animation-duration: $duration animation-iteration-count: infinite .pulse @include inline-animation(2s) from background-color: yellow to background-color: red CSS Output
.pulse animation-name: inline-uxy9kde8a; animation-duration: 2s; animation-iteration-count: infinite; > @keyframes inline-uxy9kde8a from background-color: yellow; > to background-color: red; > > �� Интересный факт:
Интерполяция полезна для вставки значений в строки, но в остальном она редко требуется в выражениях SassScript. Вам определенно не нужно просто использовать переменную в значении свойства. Вместо того, чтобы писать color: # , вы можете просто написать color: $accent !
⚠️ Внимание!
Практически всегда использовать числовую интерполяцию — плохая идея. Интерполяция возвращает строки без кавычек, которые нельзя использовать для дальнейших вычислений, и избегает встроенных мер безопасности Sass, чтобы гарантировать правильное использование единиц измерения.
В Sass есть мощная арифметика единиц, которую вы можете использовать вместо этого. Например, вместо того, чтобы писать #px , напишите $width * 1px или, еще лучше, объявите переменную $width в терминах px для начала. Таким образом, если у $width уже есть единицы измерения, вы получите красивое сообщение об ошибке вместо компиляции поддельного CSS.
Процитированные строки permalink Процитированные строки
В большинстве случаев интерполяция вводит тот же текст, который использовался бы, если бы выражение использовалось как значение свойства. Но есть одно исключение: кавычки вокруг цитируемых строк удаляются (даже если эти цитируемые строки находятся в списках). Это позволяет писать строки в кавычках, содержащие синтаксис, недопустимый в SassScript (например, селекторы), и интерполировать их в правила стиля.
SCSS Syntax
.example unquoted: #"string">; > Sass Syntax
.example unquoted: #"string"> CSS Output
.example unquoted: string; > ⚠️ Внимание!
While it’s tempting to use this feature to convert quoted strings to unquoted strings, it’s a lot clearer to use the string.unquote() function. Instead of # , write string.unquote($string) !
- Текущие релизы:
- Dart Sass1.49.0
- LibSass3.6.5
- Ruby Sass ⚰
- Руководство по внедрению
Sass © 2006–2022 команда Sass и многочисленные участники. Он доступен для использования и модификации по лицензии MIT .
Критическое изменение: Синтаксис переменных CSS
Более старые версии LibSass и Ruby Sass анализировали объявления настраиваемых свойств так же, как и любое другое объявление свойств, позволяя использовать в качестве значений полный диапазон выражений SassScript. Но это было несовместимо с CSS.
Совместимость:
LibSass since 3.5.0
Ruby Sass since 3.5.0
Спецификация CSS позволяет использовать почти любую строку символов в объявлении настраиваемого свойства. Несмотря на то, что эти значения могут не иметь смысла для какого-либо свойства CSS , к ним можно получить доступ из JavaScript. Когда они были проанализированы как значения SassScript, синтаксис, который был бы допустимым простым CSS , не удалось проанализировать. Например, библиотека полимеров использовала это для поддержки примесей простого CSS :
SCSS Syntax
:root --flex-theme: border: 1px solid var(--theme-dark-blue); font-family: var(--theme-font-family); padding: var(--theme-wide-padding); background-color: var(--theme-light-blue); >; > CSS Output
:root --flex-theme: border: 1px solid var(--theme-dark-blue); font-family: var(--theme-font-family); padding: var(--theme-wide-padding); background-color: var(--theme-light-blue); >; > Чтобы обеспечить максимальную совместимость с простым CSS , более поздние версии Sass требуют, чтобы выражения SassScript в значениях пользовательских свойств были записаны в пределах интерполяции. Интерполяция также будет работать для старых версий Sass, поэтому рекомендуется для всех таблиц стилей.
SCSS Syntax
$accent-color: #fbbc04; :root // WRONG, will not work in recent Sass versions. --accent-color-wrong: $accent-color; // RIGHT, will work in all Sass versions. --accent-color-right: #$accent-color>; > Sass Syntax
$accent-color: #fbbc04 :root // WRONG, will not work in recent Sass versions. --accent-color-wrong: $accent-color // RIGHT, will work in all Sass versions. --accent-color-right: #$accent-color> CSS Output
:root --accent-color-wrong: $accent-color; --accent-color-right: #fbbc04; > ⚠️ Внимание!
Поскольку интерполяция удаляет кавычки из строк в кавычках, может потребоваться заключить их в функцию meta.inspect() , чтобы сохранить их кавычки.
SCSS Syntax
@use "sass:meta"; $font-family-monospace: Menlo, Consolas, "Courier New", monospace; :root --font-family-monospace: #meta.inspect($font-family-monospace)>; > Sass Syntax
@use "sass:meta" $font-family-monospace: Menlo, Consolas, "Courier New", monospace :root --font-family-monospace: #meta.inspect($font-family-monospace)> CSS Output
:root --font-family-monospace: Menlo, Consolas, "Courier New", monospace; > Интерполяция строк с помощью $
Символ $ определяет строковый литерал как интерполированную строку. Интерполированная строка — это строковый литерал, который может содержать выражения интерполяции. При разрешении интерполированной строки в результирующую элементы с выражениями интерполяции заменяются строковыми представлениями результатов выражений.
Интерполяция строк предоставляет легко читаемый и удобный синтаксис для форматирования строк. Его проще читать, чем составное форматирование строк. В следующем примере обе этих функции используются для получения одинаковых выходных данных:
var name = "Mark"; var date = DateTime.Now; // Composite formatting: Console.WriteLine("Hello, ! Today is , it's now.", name, date.DayOfWeek, date); // String interpolation: Console.WriteLine($"Hello, ! Today is , it's now."); // Both calls produce the same output that is similar to: // Hello, Mark! Today is Wednesday, it's 19:40 now. Начиная с C# 10, можно использовать интерполированную строку для инициализации константной строки. Это можно сделать, только если все выражения интерполяции в интерполированной строке также являются константными строками.
Структура интерполированной строки
Для определения строкового литерала в качестве интерполированной строки добавьте к началу символ $ . Между $ и » в начале строкового литерала не может быть пробела.
Структура элемента с выражением интерполяции выглядит следующим образом:
Элементы в квадратных скобках являются необязательными. Каждый из элементов описан в таблице ниже:
| Элемент | Description |
|---|---|
| interpolationExpression | Выражение, создающее форматируемый результат. Строковое представление null является String.Empty. |
| alignment | Константное выражение, значение которого определяет минимальное количество символов в строковом представлении результата выражения. Если оно положительное, строковое представление выравнивается по правому краю, если отрицательное — по левому краю. Дополнительные сведения см. в разделе компонента выравнивания статьи о составном форматировании. |
| formatString | Строка форматирования, поддерживаемая типом результата выражения. Дополнительные сведения см. в разделе компонента»Формат строки» статьи о составном форматировании . |
В следующем примере используются необязательные компоненты форматирования, описанные выше:
Console.WriteLine($"|||"); const int FieldWidthRightAligned = 20; Console.WriteLine($" - default formatting of the pi number"); Console.WriteLine($" - display only three decimal digits of the pi number"); // Output is: // |Left | Right| // 3.14159265358979 - default formatting of the pi number // 3.142 - display only three decimal digits of the pi number Начиная с C# 11, можно использовать новые строки в выражении интерполяции, чтобы сделать код выражения более читаемым. В следующем примере показано, как новые строки могут улучшить удобочитаемость выражения, включающего сопоставление шаблонов:
string message = $"The usage policy for is < safetyScore switch < >90 => "Unlimited usage", > 80 => "General usage, with daily safety check", > 70 => "Issues must be addressed within 1 week", > 50 => "Issues must be addressed within 1 day", _ => "Issues must be addressed before continued use", > >"; Интерполированные необработанные строковые литералы
Начиная с C# 11, можно использовать интерполированный необработанный строковый литерал, как показано в следующем примере:
int X = 2; int Y = 3; var pointMessage = $"""The point ", " is from the origin"""; Console.WriteLine(pointMessage); // Output is: // The point "2, 3" is 3.606 from the origin Чтобы внедрить < и >символы в результируемую строку, запустите интерполированный необработанный строковый литерал с несколькими $ символами. При этом любая последовательность < или >символы короче числа $ символов, внедренных в результирующую строку. Чтобы заключить любое выражение интерполяции в эту строку, необходимо использовать то же количество фигурных скобок, что и количество $ символов, как показано в следующем примере:
int X = 2; int Y = 3; var pointMessage = $$""">, >> is <> from the origin>"""; Console.WriteLine(pointMessage); // Output is: // is 3.606 from the origin> В предыдущем примере интерполированный строковый литерал начинается с двух $ символов. Вот почему необходимо поместить каждое выражение интерполяции между двойными скобками и > . Одна фигурная скобка внедрена в результирующую строку. Если необходимо внедрить повторяющиеся < или >символы в результирующий строке, используйте соответствующее число $ символов, чтобы назначить интерполированный необработанный строковый литерал.
Специальные символы
Чтобы включить в текст, создаваемый интерполированной строкой, фигурную скобку «», используйте две фигурные скобки — «<>«. Дополнительные сведения см. в разделе «Экранирование фигурных скобок » статьи о составном форматировании .
Так как двоеточие (:) имеет особое значение в элементе выражения интерполяции, чтобы использовать условный оператор в выражении интерполяции, заключите это выражение в круглые скобки.
В следующем примере показано добавление фигурной скобки в строку результатов. В нем также показано, как использовать условный оператор:
string name = "Horace"; int age = 34; Console.WriteLine($"He asked, \"Is your name ?\", but didn't wait for a reply :- <<"); Console.WriteLine($"is year <(age == 1 ? "" : "s")>old."); // Output is: // He asked, "Is your name Horace?", but didn't wait for a reply :-< // Horace is 34 years old. Интерполированная строка детализации начинается с обоих $ и @ символов. Вы можете использовать $ и @ в любом порядке: $@". " @$". " оба и являются допустимыми интерполированными подробными строками. Дополнительные сведения о буквальных строках см. в статьях о строках и буквальном идентификаторе.
Форматирование, зависят от языка и региональных параметров
По умолчанию в интерполированной строке используется текущий язык и региональные параметры, определяемые свойством CultureInfo.CurrentCulture для всех операций форматирования.
Чтобы разрешить интерполированную строку в строку результата, зависят от языка и региональных параметров, используйте String.Create(IFormatProvider, DefaultInterpolatedStringHandler) метод, который доступен начиная с .NET 6. Следующий пример показывает, как это сделать:
double speedOfLight = 299792.458; System.Globalization.CultureInfo.CurrentCulture = System.Globalization.CultureInfo.GetCultureInfo("nl-NL"); string messageInCurrentCulture = $"The speed of light is km/s."; var specificCulture = System.Globalization.CultureInfo.GetCultureInfo("en-IN"); string messageInSpecificCulture = string.Create( specificCulture, $"The speed of light is km/s."); string messageInInvariantCulture = string.Create( System.Globalization.CultureInfo.InvariantCulture, $"The speed of light is km/s."); Console.WriteLine($" "); Console.WriteLine($" "); Console.WriteLine($" "); // Output is: // nl-NL The speed of light is 299.792,458 km/s. // en-IN The speed of light is 2,99,792.458 km/s. // Invariant The speed of light is 299,792.458 km/s. В .NET 5 и более ранних версиях .NET используйте неявное преобразование интерполированной строки в FormattableString экземпляр. Затем можно использовать метод экземпляра FormattableString.ToString(IFormatProvider) или статический FormattableString.Invariant метод для создания строки результатов, определенной языком и региональными параметрами. Следующий пример показывает, как это сделать:
double speedOfLight = 299792.458; FormattableString message = $"The speed of light is km/s."; var specificCulture = System.Globalization.CultureInfo.GetCultureInfo("en-IN"); string messageInSpecificCulture = message.ToString(specificCulture); Console.WriteLine(messageInSpecificCulture); // Output: // The speed of light is 2,99,792.458 km/s. string messageInInvariantCulture = FormattableString.Invariant(message); Console.WriteLine(messageInInvariantCulture); // Output is: // The speed of light is 299,792.458 km/s. Другие ресурсы
Если у вас нет опыта работы с интерполяцией строк, ознакомьтесь с интерактивным учебником по интерполяции строк в C#. Вы можете также просмотреть другой учебник по интерполяции строк в C#. В этом учебнике показано, как использовать интерполированные строки для создания форматированных строк.
Компиляция интерполированных строк
Начиная с C# 10 и .NET 6 компилятор проверка, если интерполированная строка назначена типу, удовлетворяющему шаблону интерполированного обработчика строк. Интерполированный обработчик строк — это тип, который преобразует интерполированную строку в результирующую строку. Если интерполированная строка имеет тип string , он обрабатывается с System.Runtime.CompilerServices.DefaultInterpolatedStringHandlerпомощью . Пример пользовательского обработчика интерполированной строки см. в руководстве по написанию пользовательского обработчика интерполяции строк. Использование интерполированного обработчика строк — это расширенный сценарий, который обычно требуется по соображениям производительности.
Одним из побочных эффектов интерполированных обработчиков строк является то, что настраиваемый обработчик, включая System.Runtime.CompilerServices.DefaultInterpolatedStringHandler, может не оценивать все выражения интерполяции в интерполированной строке во всех условиях. Это означает, что побочные эффекты этих выражений могут не возникать.
До C# 10, если интерполированная строка имеет тип string , обычно он преобразуется в String.Format вызов метода. Компилятор может заменить String.Format на String.Concat, если проанализированное поведение будет эквивалентно объединению.
Если интерполированная строка имеет тип IFormattable или FormattableString, компилятор создает вызов метода FormattableStringFactory.Create.
Спецификация языка C#
- C# 10 — улучшены интерполированные строки
- C# 11 — необработанные строковые литералы
- C# 11 — новые строки в интерполяциях строк
См. также
- справочник по C#
- Специальные символы C#
- Строки
- Строки стандартных числовых форматов
- Составное форматирование
- String.Format
- Упрощение интерполяции (правило стиля IDE0071)
- Интерполяция строк в C# 10 и .NET 6 (блог.NET)
Совместная работа с нами на GitHub
Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.