Как сгенерировать переменные SCSS?

Question

[jeruthadam]

SCSS позвояет генерить классы в цикле. А как сгенерить переменные?

$base-rem: 20;

@for $px from 1 through 40 {
  $px#{$px}: #{$px / $base-rem}rem;
}

Не работает!

Надо переменные типа

$px40: #{40 / $base-rem}rem;

Comments

[Сергей delphinpro]

Зачем?
Сгенерируйте карту значений и используйте ее. Это вроде массивов в других языках.

[jeruthadam]

Сергей delphinpro, использовать где и как.

[Сергей delphinpro]

jeruthadam, где вам ее использовать я не знаю =)) Для чего-то же нужна.

$sizes: (
  s20: 20px,
  s40: 40px,
)

h1 {
  font-size: map_get($sizes, s40);
}

h2 {
  font-size: map_get($sizes, s20);
}

// Сгенерировать можно так

$base-rem: 20;

$sizes: ();

@for $px from 1 through 40 {
  $map: (s#{$px}: #{$px / $base-rem}rem);
  $sizes: map-merge($sizes, $map);
}

// Test (см консоль)
@debug $sizes;

Answer 1

[Анатолий Куликов]

Честно говоря, ни разу не слышал, чтобы scss генерировал переменные для своего использования.

Вся же "магия" scss происходит тогда, когда происходит генерация css - там программа идёт по файлу и соответствующе обрабатывает код.

Могу посоветовать попробовать сгенерировать нужный код любым языком программирования и вставить.

Comments

[jeruthadam]

Суд по всему да, не умеет.