Как в sassscript выглядит валидный синтаксис интерполяции

Интерполяция

Вы также можете использовать переменные 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; > 

Рефакторинг для упрощения интерполяции строк

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

Область применения этого рефакторинга:

Что: позволяет упростить интерполяцию строк.

Когда: у вас есть интерполяция строк, которую можно упростить.

Почему: упрощение интерполяции строк может обеспечить более четкий и краткий синтаксис. Это средство рефакторинга выполнит указанную задачу автоматически, и вам не придется делать это вручную.

Практические советы

1. Поместите курсор на интерполяцию строки:
2. Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.
3. Выберите Упростить интерполяцию

Интерполяция строк в C#

В этом руководстве описано, как использовать интерполяцию строк для форматирования и включения результатов выражения в строку результатов. В примерах предполагается, что вам знакомы основные принципы C# и форматирования типов .NET. Если вы не знакомы с интерполяцией строк или форматированием типов .NET, сначала ознакомьтесь с интерактивным учебником по интерполяции строк. Дополнительные сведения о типах форматирования в .NET см. в разделе «Типы форматирования» в .NET.

Введение

Для определения строкового литерала в качестве интерполированной строки добавьте к началу символ $ . Вы можете внедрить любое допустимое выражение C#, возвращающее значение в интерполированной строке. В следующем примере после вычисления выражения его результат преобразуется в строку и включается в строку результатов:

double a = 3; double b = 4; Console.WriteLine($"Area of the right triangle with legs of and is "); Console.WriteLine($"Length of the hypotenuse of the right triangle with legs of and is "); double CalculateHypotenuse(double leg1, double leg2) => Math.Sqrt(leg1 * leg1 + leg2 * leg2); // Output: // Area of the right triangle with legs of 3 and 4 is 6 // Length of the hypotenuse of the right triangle with legs of 3 and 4 is 5 

Как показано в примере, можно включить выражение в интерполированную строку, заключив его в фигурные скобки:

Интерполированные строки поддерживают все возможности составного форматирования строк. Это делает их более удобочитаемыми по сравнению с использованием метода String.Format.

Как указать строку формата для выражения интерполяции

Чтобы указать строку формата, поддерживаемую типом результата выражения, следуйте выражению интерполяции с двоеточием («:») и строкой формата:

В следующем примере показано, как задать стандартные и настраиваемые строки формата для выражений, возвращающих дату и время или числовые результаты:

var date = new DateTime(1731, 11, 25); Console.WriteLine($"On L. Euler introduced the letter e to denote ."); // Output: // On Sunday, November 25, 1731 L. Euler introduced the letter e to denote 2.71828. 

Управление шириной поля и выравниванием в форматированных выражениях интерполяции

Чтобы указать минимальную ширину поля и выравнивание результата отформатированного выражения, следуйте выражению интерполяции с запятыми («,») и константным выражением:

Если значение alignment положительное, форматированное выражение будет выровнено по правому краю, а если отрицательное — по левому.

Если вам нужно задать и выравнивание, и строку формата, начните с компонента выравнивания:

В следующем примере показано, как задать выравнивание. Текстовые поля разграничены символом вертикальной черты («|»):

const int NameAlignment = -9; const int ValueAlignment = 7; double a = 3; double b = 4; Console.WriteLine($"Three classical Pythagorean means of and :"); Console.WriteLine($"|||"); Console.WriteLine($"|||"); Console.WriteLine($"|||"); // Output: // Three classical Pythagorean means of 3 and 4: // |Arithmetic| 3.500| // |Geometric| 3.464| // |Harmonic | 3.429| 

В выходных данных в примере видно, что если длина форматированного результата выражения превышает заданную ширину поля, значение alignment игнорируется.

Как использовать escape-последовательности в интерполированной строке

Интерполированные строки поддерживают все escape-последовательности, которые могут использоваться в обычных строковых литералах. Дополнительные сведения см. в статье Escape-последовательности строки.

Для литеральной интерпретации escape-последовательности используйте строковый литерал verbatim. Интерполированная строка детализации начинается с обоих $ и @ символов. Вы можете использовать $ и @ в любом порядке: $@». » @$». » оба и являются допустимыми интерполированными подробными строками.

В строке результатов указывайте двойную фигурную скобку «>». Дополнительные сведения см. в разделе «Экранирование фигурных скобок » статьи о составном форматировании .

В следующем примере показано, как включить фигурные скобки в строку результата и создать интерполированную строку verbatim:

var xs = new int[] < 1, 2, 7, 9 >; var ys = new int[] < 7, 9, 12 >; Console.WriteLine($"Find the intersection of the <<>> and <<>> sets."); // Output: // Find the intersection of the and sets. var userName = "Jane"; var stringWithEscapes = $"C:\\Users\\\\Documents"; var verbatimInterpolated = $@"C:\Users\\Documents"; Console.WriteLine(stringWithEscapes); Console.WriteLine(verbatimInterpolated); // Output: // C:\Users\Jane\Documents // C:\Users\Jane\Documents 

Как использовать троичный условный оператор ?: в выражении интерполяции

Двоеточие (:) имеет особое значение в элементе выражения интерполяции. Чтобы использовать условный оператор в выражении, заключите это выражение в скобки, как показано в следующем примере:

var rand = new Random(); for (int i = 0; i < 7; i++) < Console.WriteLine($"Coin flip: <(rand.NextDouble() < 0.5 ? "heads" : "tails")>"); > 

Создание строки результата с интерполяцией для определенного языка и региональных параметров

По умолчанию в интерполированной строке используется текущий язык и региональные параметры, определяемые свойством CultureInfo.CurrentCulture для всех операций форматирования.

Начиная с .NET 6, можно использовать String.Create(IFormatProvider, DefaultInterpolatedStringHandler) метод для разрешения интерполированной строки в строку результата, зависят от языка и региональных параметров, как показано в следующем примере:

var cultures = new System.Globalization.CultureInfo[] < System.Globalization.CultureInfo.GetCultureInfo("en-US"), System.Globalization.CultureInfo.GetCultureInfo("en-GB"), System.Globalization.CultureInfo.GetCultureInfo("nl-NL"), System.Globalization.CultureInfo.InvariantCulture >; var date = DateTime.Now; var number = 31_415_926.536; foreach (var culture in cultures) < var cultureSpecificMessage = string.Create(culture, $""); Console.WriteLine($""); > // Output is similar to: // en-US 8/27/2023 12:35:31 PM 31,415,926.536 // en-GB 27/08/2023 12:35:31 31,415,926.536 // nl-NL 27-08-2023 12:35:31 31.415.926,536 // 08/27/2023 12:35:31 31,415,926.536 

В более ранних версиях .NET используйте неявное преобразование интерполированной строки в System.FormattableString экземпляр и вызовите его ToString(IFormatProvider) метод для создания строки результатов, зависяющей от языка и региональных параметров. Следующий пример показывает, как это сделать:

var cultures = new System.Globalization.CultureInfo[] < System.Globalization.CultureInfo.GetCultureInfo("en-US"), System.Globalization.CultureInfo.GetCultureInfo("en-GB"), System.Globalization.CultureInfo.GetCultureInfo("nl-NL"), System.Globalization.CultureInfo.InvariantCulture >; var date = DateTime.Now; var number = 31_415_926.536; FormattableString message = $""; foreach (var culture in cultures) < var cultureSpecificMessage = message.ToString(culture); Console.WriteLine($""); > // Output is similar to: // en-US 8/27/2023 12:35:31 PM 31,415,926.536 // en-GB 27/08/2023 12:35:31 31,415,926.536 // nl-NL 27-08-2023 12:35:31 31.415.926,536 // 08/27/2023 12:35:31 31,415,926.536 

Как показано в примере, можно использовать один экземпляр FormattableString для создания нескольких строк результата для различных языков и региональных параметров.

Как создать строку результата с помощью инвариантного языка и региональных параметров

Начиная с .NET 6, используйте String.Create(IFormatProvider, DefaultInterpolatedStringHandler) метод для разрешения интерполированной строки в результируемую строку для InvariantCultureэтой строки, как показано в следующем примере:

string message = string.Create(CultureInfo.InvariantCulture, $"Date and time in invariant culture: "); Console.WriteLine(message); // Output is similar to: // Date and time in invariant culture: 05/17/2018 15:46:24 

В более ранних версиях .NET вместе с FormattableString.ToString(IFormatProvider) методом можно использовать статический FormattableString.Invariant метод, как показано в следующем примере:

string message = FormattableString.Invariant($"Date and time in invariant culture: "); Console.WriteLine(message); // Output is similar to: // Date and time in invariant culture: 05/17/2018 15:46:24 

Заключение

См. также

• String.Format
• System.FormattableString
• System.IFormattable
• Строки

Совместная работа с нами на GitHub

Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.

The .NET documentation is open source. Provide feedback here.

Обратная связь

Отправить и просмотреть отзыв по

Интерполяция

Интерполяцию можно использовать практически в любом месте таблицы стилей 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 .