23.07.2020

LESS: mixin и цикл замены цвета фона, шрифта и svg по массивам

Задача: есть 2+ массива цветов по которым надо сделать раскраску блоков содержащих SVG элементы, по типу разных уведомлений в css-фреймворках. Чтобы каждый элемент не прописывать и в будущем можно было легко заменить цвета в теме решил посидеть и сделать mixin и цикл.

Решение замены цвета в SVG подсмотрел тут

.SVGcolorReplace(@src, @color-default, @color-new) {
	@data-uri: data-uri('image/svg+xml;charset=UTF-8', '@{src}');
	@replace-src: replace(
		'@{data-uri}',
		'@{color-default}',
		'@{color-new}'
	);
	background-image: e(@replace-src);
}

Далее делаем два массива цветов. Один для фона, второй для текста и SVG.

@group_color: #F7D6E0, #C6DBF0, #FFE292, #FFA69E;
@group_color_text: #CF94A6, #88A6C5, #EBCE80, #E5A39D;

Прогоняем через цикл

each(@group_color, {
	.group_color_@{index} {
		background-color: fade(@value,50%);
		color: extract(@group_color_text,@index);
		&:hover {
			background-color: fade(@value,60%);
		}
		&:after {
			background: no-repeat 0 center / auto 5px;
			.SVGcolorReplace('icon.svg', #000000, extract(@group_color_text,@index));
		}
		
	}
});

На выходе получается вот такое

.group_color_1 {
  background-color: rgba(247, 214, 224, 0.5);
  color: #CF94A6;
}
.group_color_1:hover {
  background-color: rgba(247, 214, 224, 0.6);
}
.group_color_1:after {
  background: no-repeat 0 center / auto 5px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg.....stroke%3D%22%23CF94A6.....svg%3E%0A");
}
/* ... _2 ... _3 ... */
.group_color_4 {
  background-color: rgba(255, 166, 158, 0.5);
  color: #E5A39D;
}
.group_color_4:hover {
  background-color: rgba(255, 166, 158, 0.6);
}
.group_color_4:after {
  background: no-repeat 0 center / auto 5px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg.....stroke%3D%22%23E5A39D.....svg%3E%0A");
}

Краткие пояснения по каждой используемой функции для тех кто только знакомится с LESS:

1. Миксин (mix in, mixin, примеси) — в LESS это своего рода пользовательская функция, которая создаётся по такому принципу .ИМЯМИКСИНА(@передаваемые,@переменные){}
2. @data-uri: data-uri(‘image/svg+xml;charset=UTF-8’, ‘@{src}’) — загружаем SVG файл в переменную. Равно также, как подключаете его файл.
3. Функция replace(), где атрибуты по порядку как в js replace — «строка где искать», «что искать (RegExp)», «чем заменять», «[не обязателен] флаг для RegExp»
4. Функция each(@VarArray, {}) — цикл который проходит по переменной @VarArray. В цикле по-умолчанию есть переменная @{index} — порядковый номер элемента
5. Функция fade(ЦВЕТ,50%) добавляет прозрачность цвету в формате RGBA
6. Функция extract(@varArray, index) позволяет извлечь из другого массива элемент по порядковому номеру

Поняв такой сложный для новичка миксин вы сможете писать свои миксины для LESS очень просто.