Непонятная конструкция в SCSS

Question

Скажите пожалуйста, как называется эта конструкция, на которую направлена стрелка? А именно #{$cols}n Автор объяснил только то, что она непосредственно обратится к последней колонке и задаст свой стиль, но как называется такой синтаксис ( регулярные выражения ?) и для чего используется - промолчал.

Answer 1

@mixin это своего рода функция, как например в JS.

Допустим если использовать правило

.cols {
  @import grid(10, 5px); /* $cols, $margin */
}

То блок .cols получит следующие правила

.cols {
  float: left;
  background: #ce3d3d;
  margin-right: 5px;  /* $margin */
  margin-bottom: 5px; /* $margin */
  height: 150px;
}

.cols:nth-child(10n) { /* $cols */
  margin-right: 0;
}

А конструкция ${} в ней является интерполяцией переменной.

Вы также можете использовать переменные SassScript в селекторах и в названиях свойств используя синтаксис #{} интерполяции

Answer 2

из документации:

Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS. Just wrap an expression in #{} in any of the following places:

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-файла, так что для этих целей следует обернуть выражения в #{} чтобы отделить их от других частей строки.

на русском - https://sass-scss.ru/documentation/sassscript/interpolyatsiya/

аналогично, напримре, встраивание переменной внутри строки в php, string {$var}string устраняет возможные неоднозначности.

БЛОГ НА HUSL

Непонятная конструкция в SCSS

Ответы (2 шт):