dom1n1k
@dom1n1k

Как лучше обращаться с ассоциативными массивами в SASS?

В SASS есть ассоциативные массивы (карты). Штука безусловно полезная - была бы, если бы не уродский синтаксис использования:
map-get($map, $key)
Кому могло в голову взбрести такое, я не знаю. И ладно ещё, если у меня одномерный массив. А если двухмерный или не дай бог трех? Ну что-то наподобии:
$button-color: (
    primary: (
        normal: (
            background: #0088cc,
            text: #ffffff,
        ),
        hover: (
            background: #0077b3,
            text: #ffffff,
        ),
    ),
    default: (
        // ...
    ),
);

// wtf?
background-color: map-get(map-get(map-get($button-color, 'primary'), 'hover'), 'background');

Ну можно, конечно, написать некую оберточную функцию или миксин. Но по-моему, это проблему не устранит, а только немного сгладит.

Реально удобнее просто наделать врукопашную батарею переменных:
$button-primary-normal-background: #0088cc;
$button-primary-normal-text:       #ffffff;
$button-primary-hover-background:  #0077b3;
$button-primary-hover-text:        #ffffff;
// ...


И вообще я так и не смог найти ситуации, когда массив оказался бы удобнее просто набора переменных. Хотя в теории логично было бы использовать массивы для объединения однотипных сущностей. Скажем, для тех же брейкпойнтов в медиа-запросах.
Кажется, что массив окажется удобнее только в ситуации, когда количество значений заранее неизвестно - чтобы обходить их в цикле. А в вышеприведенном примере с кнопками - нафиг не нужны.

Возможно, я что-то недопонимаю и есть какие-то хорошие практики?
  • Вопрос задан
  • 265 просмотров
Решения вопроса 1
dom1n1k
@dom1n1k Автор вопроса
Осенью 2020 года сделали сокращенную запись:
$config: (a: (b: (c: d)));
@debug map.get($config, a, b, c); // d

То есть уже довольно давно, но позднее этого вопроса.

Пост: https://sass-lang.com/blog/request-for-comments-ne...
Релиз: https://github.com/sass/dart-sass/releases/tag/1.27.0
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
filgaponenko
@filgaponenko
frontend developer
Есть хорошая практика не использовать без необходимости все возможности языка (особенно новые).

Если достаточно набора переменных то нужно остановиться на этом, ведь ваш код нужно будет читать еще и людям, не только роботам, поэтому стоит подумать о том, чтобы сделать выбор в сторону более поддерживаемого кода, чем в сторону более "оптимизированного".
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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