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

Question

jeruthadam @jeruthadam

Я крут

CSS
Sass

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

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

$base-rem: 20;

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

Не работает!

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

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

Вопрос задан более трёх лет назад
65 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

Сергей delphinpro @delphinpro Куратор тега CSS

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

Написано более трёх лет назад
jeruthadam @jeruthadam Автор вопроса

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

Написано более трёх лет назад

Сергей delphinpro @delphinpro Куратор тега CSS

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;

Написано более трёх лет назад

Решения вопроса 1

1 комментарий

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Как сделать это меню в 2 ряда, а не чтобы всё вываливалось?
- 1 подписчик
- 4 минуты назад
- 8 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 2 часа назад
- 29 просмотров
1

ответ
HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- 3 часа назад
- 97 просмотров
0

ответов
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 22 часа назад
- 48 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 23 часа назад
- 54 просмотра
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 85 просмотров
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 23 апр.
- 85 просмотров
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 23 апр.
- 709 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Написать 3 раздела ВКР

25 апр. 2024, в 14:44

10000 руб./за проект

Создание теста в Postman

25 апр. 2024, в 14:44

250 руб./в час

Учебный проект - бронирование отелей, FastAPI, SQLA + HTML, CSS, JS

25 апр. 2024, в 14:41

5000 руб./за проект

Зачем?
Сгенерируйте карту значений и используйте ее. Это вроде массивов в других языках.
Сергей 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 · 2019-07-22 19:02:30

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

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

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт