Как в 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; > 

Sass – Комментарии

В этой главе мы будем изучать Sass Comments . Комментарии представляют собой неисполняемые операторы, которые помещаются в исходный код. Комментарии облегчают понимание исходного кода. SASS поддерживает два типа комментариев.

• Многострочные комментарии – написаны с использованием / * и * /. Многострочные комментарии сохраняются при выводе CSS.
• Однострочные комментарии – написаны с использованием //, за которыми следуют комментарии. Однострочные комментарии не сохраняются при выводе CSS.

Многострочные комментарии – написаны с использованием / * и * /. Многострочные комментарии сохраняются при выводе CSS.

Однострочные комментарии – написаны с использованием //, за которыми следуют комментарии. Однострочные комментарии не сохраняются при выводе CSS.

пример

В следующем примере демонстрируется использование комментариев в файле SCSS.

   SASS comments   rel = "stylesheet" type = "text/css" href = "style.css"/>   Welcome to TutorialsPoint   href = "http://www.tutorialspoint.com/">TutorialsPoint   

Далее создайте файл style.scss .

style.scss

/* This comment is * more than one line long * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body < color: black; >// These comments are in single line // They will not appear in the CSS output, // since they use the single-line comment syntax. a

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

Затем выполните приведенную выше команду; он автоматически создаст файл style.css со следующим кодом –

style.css

/* This comment is * more than one line long * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body < color: black; >a

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код –

• Сохраните приведенный выше HTML-код в файле sass_comments.html .
• Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Сохраните приведенный выше HTML-код в файле sass_comments.html .

Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

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

Sass – интерполяция в многострочных комментариях

Описание

Интерполяция внутри многострочных комментариев разрешается в результирующем CSS. Вы можете указать переменные или имена свойств в фигурных скобках.

Синтаксис

$var : "value"; /* multiline comments # */

пример

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

    
Welcome to TutorialsPoint
 
This is an example for Interpolation in SASS.
   

Далее создайте файл style.scss .

style.css

$version: "7.8"; /* Framework version for the generated CSS is #. */

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

Затем выполните приведенную выше команду; он автоматически создаст файл style.css со следующим кодом

style.css

/* Framework version for the generated CSS is 7.8. */

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код –

Сохраните приведенный выше HTML-код в файле sass_comments_interpolation.htm .

Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Интерполяция переменных

Если вы раньше работали с PHP или Ruby, то должны были хотя бы раз использовать интерполяцию переменных. Интерполяция переменных — это получение значения одной переменной в зависимости от другой или других переменных.

В Less есть конструкции типа @<> , которые технически похожи на интерполяцию переменных. Такие конструкции могут быть использованы в селекторах, переменных и строках. Далее будут рассмотрены все популярные и почти не применяемые варианты использования интерполяции переменных.

Я не зря вынес эту интересную тему в отдельный раздел, так как с помощью интерполяции переменных можно творить чудеса и делать ваш проект или библиотеку максимально настраиваемыми.

Интерполяция переменных в строках

Начинать нужно с основ, так как, если есть желание овладеть технологией в полной мере, то именно основы дадут понимание того, как что-то работает или почему это что-то не работает.

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

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

@russia-city-odintsovo: Одинцово; @english-city-odintsovo: Odintsovo; @russia-hello: "Привет, @!"; @english-hello: "Hello, @!"; 

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

.hello-russia < content: "Привет, Одинцово!"; > .hello-english < content: "Hello, Odintsovo!"; > 

Пример 3.2.1

В этом примере мы подробно разберём то, как происходит интерполяция переменных. Инициализируем несколько переменных и поместим их в начале файла _styles.less так, как это было описано в начале главы:

// Variables @icon-font-name: fontawesome-webfont; @icon-font-path: "../fonts"; 

Чтобы воспользоваться шрифтом FontAwesome, в проекте необходимо использовать директиву @font-face . Ради экономии места я не стал вставлять сюда весь код примера, он, как и любой код в примерах, будет доступен в архиве.

@font-face < font-family: 'FontAwesome'; src: url('@/@.eot?v=4.3.0'); src: url('@/@.eot?#iefix&v=4.3.0') format('embedded-opentype'), . > 

На выходе компилятора получим следующий код:

@font-face < font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), . > 

Обратите внимание, если поменять вызов переменной @ на @icon-font-path то, вместо того, чтобы вставить значение переменной, компилятор попросту принял @icon-font-path за часть строки. Именно в этом и заключается суть интерполяции переменной — грубо говоря, она заставляет интерпретатор отличать строки от переменных и при необходимости подставлять их значение в строку.

@font-face < font-family: 'FontAwesome'; src: url('@icon-font-path/fontawesome-webfont.eot?v=4.3.0'); src: url('@icon-font-path/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), . > 

Интерполяция переменных в селекторах и свойствах

Иногда требуется делать код гибким вплоть до того, чтобы селекторы изменяли своё имя в зависимости от значения переменных. Наиболее вероятно, что такое поведение пригодится в библиотеках или фреймворках, в которых разработчики хотят разрешить изменять префикс классов их детища.

Интерполяция переменных в селекторах по конструкции полностью повторяет таковую в строках:

@lang-prefix: site; @lang-russia: rus; @lang-english: eng; .@-@ < content: "@"; > .@-@ < content: "@"; > 

Компилятор сам позаботится о формировании имени класса из двух переменных, инициализированных ранее:

.site-rus < content: "rus"; > .site-eng < content: "eng"; > 

Никто не запрещает использовать интерполяцию и в рамках свойств. Конструкция вида:

@property: color; .widget < @ : #0ee; background-@ : #999; > 

будет компилироваться в:

.widget < color: #0ee; background-color: #999; > 

Интерполяция переменных внутри переменных

Важно понимать, что хороший код должен быть адаптируемым. То есть имена селекторов и значения свойств должны меняться в зависимости от контекста использования, если это требуется разработчику.

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

Пример 3.2.2

Так как примеси мы ещё не проходили, а интерполяцию переменных внутри переменных показать и объяснить нужно, то представим себе ситуацию, в которой у нас есть несколько переменных:

// Variables @color-prefix: color; @color-grey: #fafafa; @color-red: #ffebee; 

Разработчику нужно выбрать серый и красный цвет, но префикс переменных, в которых хранится искомое значение, ему не известен — он хранится в переменной @color-prefix .

Чтобы получить цвета, разработчику нужно построить переменную на основе уже известной ему переменной:

.grey < background-color: e("@-grey>"); > .red < background-color: e("@-red>"); > 

Обратите внимание на то, что здесь используется экранирование, так как конструкция внутри очень похожа на конструкцию переменной, но в то же время не являющаяся ей. Далее нужно обернуть конструкцию в @<> столько раз, сколько раз планируется собирать переменную из частей. Проще говоря, мы конструируем строку, а потом получаем значение переменной, имя которой совпадает с этой строкой.

Однако, ложкой дёгтя является то, что при такой интерполяции значение всегда приводится к строке. Это поведение стоит отнести к частному случаю, который также имеет своё решение, пусть и не самое элегантное.

Частый случай интерполяции переменных внутри переменных

В некоторых случаях появляется необходимость получить значение переменной, имя которой задано в другой переменной. Примером может служить примесь, которая выставляет отступы блока в зависимости от переданной в неё строки. Рассмотрим эту проблему более детально.

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

// Small @margin-small: 40px; @padding-small: 20px; // Large @margin-large: 80px; @padding-large: 40px; 

В будущем разработчик напишет примесь, но, так как сейчас я о примесях ещё ничего не говорил, вместо неё будем использовать переменную @size . В этой переменной будет содержаться имя размера блока, то есть small или large . Попробуем получить отступы для произвольного блока, используя описанный выше метод интерполяции переменных внутри переменных:

// Small @margin-small: 40px; @padding-small: 20px; @size: "small"; .block < margin: ~"@>"; > 

Этот код будет скомпилирован в CSS без ошибок и свойству margin будет присвоено значение 40px . Однако, в этой синтаксической конструкции скрывается немного чёрной магии. Понять проблему поможет простая операция сложения, которую необходимо провести с интерполяцией. Давайте попробуем сложить внешний и внутренний отступ.

// Small @margin-small: 40px; @padding-small: 20px; @size: "small"; .block < margin: ~"@>" + ~"@>"; > 

Вот это поворот! Ошибка!

ParseError: Unrecognised input in _styles.less on line 8, column 32: 7 .block < 8 margin: ~"@>" + ~"@>"; 9 > 

Не буду томить читателя своими догадками и анализом происходящего — Less не умеет складывать строки. Функция экранирования возвращает строку. Да, вот так вот просто — сложить строку со строкой или строку с числом в Less нельзя. По крайне мере, в версии 2.7.1 это сделать нельзя. Впрочем, эта возможность присутствует в Sass и Stylus.

Так как же решить возникшую проблему? — использовать интерполяцию переменных с помощью конструкции @@ . К сожалению, для этого придётся ввести дополнительную переменную для каждого слагаемого.

// Small @margin-small: 40px; @padding-small: 20px; @size: "small"; .block < @margin: "margin-@"; @padding: "padding-@"; margin: @@margin + @@padding; > 

После компиляции свойству margin будет присвоено значение 60px . Это происходит вследствие того, что в переменной @margin после интерполяции находится имя переменной margin-small . Точно такая же ситуация со значением в переменной @padding . При вызове переменной с помощью конструкции @@ на её место подставляется значение переменной, имя которой указано в строке.

results matching » «

No results matching » «

Interpolation

Interpolation можно использовать практически в любом месте таблицы стилей Sass, чтобы встроить результат SassScript expression в фрагмент CSS.. Просто оберните выражение в #<> в любом из следующих мест:

• Селекторы в правилах стиля
• Имена свойств в объявлениях
• Пользовательские значения свойств
• CSS at-rules
• @extend s
• Обычная CSS @import с
• Строки в кавычках или без кавычек
• Special functions
• Простые имена функций CSS
• Loud comments

@mixin corner-icon($name, $top-or-bottom, $left-or-right) < .icon-#  background-image: url("/icons/#$name>.svg"); position: absolute; #: 0; #: 0; > > @include corner-icon("mail", top, left);

@mixin corner-icon($name, $top-or-bottom, $left-or-right) .icon-# background-image: url("/icons/#$name>.svg") position: absolute #: 0 #: 0 @include corner-icon("mail", top, left)

.icon-mail < background-image: url("/icons/mail.svg"); position: absolute; top: 0; left: 0; >

In SassScript

Совместимость (Modern Syntax):
Ruby Sass начиная с 4.0.0 (неизданный)

LibSass и Ruby Sass в настоящее время используют более старый синтаксис для анализа interpolation в SassScript.. В большинстве практических целей он работает одинаково, но может вести себя странно с operators . Подробности см. в this document .

Interpolation можно использовать в SassScript для впрыска SassScript в unquoted strings . Это особенно полезно при динамическом создании имен (например, для animations), или при использовании slash-separated values . Обратите внимание, что interpolation в SassScript всегда возвращает строку без кавычек).

@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 > > >

@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

.pulse < animation-name: inline-u7rrmuo7b; animation-duration: 2s; animation-iteration-count: infinite; > @keyframes inline-u7rrmuo7b < from < background-color: yellow; > to < background-color: red; > >

�� Интересный факт:

Interpolation полезен для вставки значений в строки, но кроме этого он редко нужен в выражениях SassScript. Вам определенно не нужно просто использовать переменную в значении свойства. Вместо color: # можно просто написать color: $accent !

⚠️ Внимание!

Почти всегда плохая идея использовать interpolation с числами. Interpolation возвращает строки без кавычек, которые нельзя использовать для дальнейших вычислений, и обходит встроенные меры безопасности Sass, гарантирующие правильное использование единиц измерения.

Sass имеет мощный unit arithmetic , который можно использовать вместо него. Например, вместо #px напишите $width * 1px или, что еще лучше, для начала объявите переменную $width в терминах px . Таким образом, если в $width уже есть модули, вы получите красивое сообщение об ошибке вместо того, чтобы компилировать поддельный CSS..

Quoted Strings

В большинстве случаев interpolation вводит точно такой же текст, который использовался бы, если бы выражение использовалось как property value . Но есть одно исключение: кавычки вокруг строк в кавычках удаляются (даже если эти строки в кавычках находятся в lists).. Это позволяет писать строки в кавычках, которые содержат синтаксис, не разрешенный в SassScript (например, селекторы), и интерполировать их в правила стиля.

.example < unquoted: #; >

.example unquoted: #

.example < unquoted: string; >

⚠️ Внимание!

Хотя заманчиво использовать эту функцию для преобразования строк в кавычках в строки без кавычек, намного проще использовать string.unquote() function . Вместо # напишите string.unquote($string) !