Непонятная конструкция в SCSS
Скажите пожалуйста, как называется эта конструкция, на которую направлена стрелка? А именно #n Автор объяснил только то, что она непосредственно обратится к последней колонке и задаст свой стиль, но как называется такой синтаксис ( регулярные выражения ?) и для чего используется — промолчал.
Отслеживать
Руслан Камов
задан 17 мар 2021 в 14:34
Руслан Камов Руслан Камов
347 2 2 серебряных знака 15 15 бронзовых знаков
у вас входящая переменная $cols у миксина, вот ее значение и выводится.
17 мар 2021 в 14:47
Спасибо, но а что это за конструкция такая? #n , как этот синтаксис называется?
17 мар 2021 в 14:56
Я бы предположил, что это способ обращения к переменной — надо её отделить от буквы n .
17 мар 2021 в 14:59
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
- Selectors in style rules
- Property names in declarations
- Custom property values
- CSS at-rules
- @extends
- Plain CSS @imports
- Quoted or unquoted strings
- Special functions
- Plain CSS function names
- Loud comments
вы не можете втыкать переменные $var в произвольные места scss-файла, так что для этих целей следует обернуть выражения в #<> чтобы отделить их от других частей строки.
аналогично, напримре, встраивание переменной внутри строки в php, string string устраняет возможные неоднозначности.
Отслеживать
ответ дан 17 мар 2021 в 14:59
29.3k 1 1 золотой знак 21 21 серебряный знак 43 43 бронзовых знака
Вот уже потихоньку лёд тронулся, только почему в конце n стоит?
17 мар 2021 в 15:01
@РусланКамов, для этого нужно изучить основы CSS — nth-child()
17 мар 2021 в 15:02
@РусланКамов потому что селектор css выглядит как :nth-child(An+B) .
17 мар 2021 в 15:02
@teran . Вы извините , я Вас не понимаю. Я знаю что :nth-child() обращается к конкретному элементу в блоке. Внутри скобок пишется номер элемента по порядку или специальные значения такие как odd или even. Но :nth-child(An+B). я не пойму
17 мар 2021 в 15:09
@РусланКамов вам выше в коментарии дали ссылку на документацию по nth-child, ознакомьтесь. Если третий записывается как :nth-child(3) , то каждый третий записывается как 3n , например. Четные можно записать как even|odd, но можно и в виде функции 2n/2n+1. Первые три, например, можно описать в виде 3-n . и так далее.
Интерполяция
Вы также можете использовать переменные 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; > Критическое изменение: Синтаксис переменных 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; > Интерполяция
Интерполяцию можно использовать практически в любом месте таблицы стилей 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 .