@omnisass/library 0.2.0

package/modules/utilities/helpers/color/_color-triad.scss

@@ -0,0 +1,141 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use '../../loggers/log-invalid-type' as *;
+@use '../../validators/type-of/is-color' as *;
+
+/// Генерирует триадную цветовую схему из трех
+/// равноудаленных цветов.
+///
+/// Функция `color-triad()` создает триадную цветовую
+/// схему, состоящую из трех цветов, которые равномерно
+/// распределены по цветовому кругу (разделены на 120 градусов).
+///
+/// Триадные схемы обладают высокой контрастностью при
+/// сохранении гармонии и часто используются в дизайне для
+/// создания ярких, сбалансированных цветовых сочетаний.
+///
+/// > Функция возвращает строковые представления цветов
+/// > (используя `meta.inspect()`), что позволяет сохранять
+/// > разные форматы. Для использования в CSS свойствах может
+/// > потребоваться `unquote()` для удаления кавычек.
+///
+/// > Все цвета в триаде имеют одинаковые значения
+/// > насыщенности и светлоты, что обеспечивает визуальную
+/// > согласованность цветовой схемы.
+///
+/// Также в основном функция возвращает цвета в формате HSL.
+/// ---
+/// @name color-triad
+/// @group utilities-helpers
+/// @since 2025.12.27
+/// @access public
+/// @author Murad Rustamov (therteenten)
+/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
+/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
+/// @link https://en.wikipedia.org/wiki/Color_scheme#Triadic См. также: Wikipedia - Triadic color schemes
+/// @link https://color.adobe.com/create/color-wheel См. также: Adobe Color - Инструмент цветового круга
+/// @link https://www.canva.com/colors/color-wheel/ См. также: Canva - Теория цвета и цветовой круг
+/// @link https://www.smashingmagazine.com/2016/04/web-developer-guide-color/ См. также: Smashing Magazine - Гид по цвету для веб-разработчиков
+/// @example scss - Создание триадной схемы из красного цвета
+/// 	@use 'sass:list';
+/// 	@use 'sass:string';
+///
+/// 	$triad: color-triad(#ff0000);
+///
+/// 	.element {
+/// 		color: string.unquote(list.nth($triad, 1)); // #ff0000
+/// 		border-color: string.unquote(list.nth($triad, 2)); // hsl(120, 100%, 50%) → зеленый
+/// 		background-color: string.unquote(list.nth($triad, 3)); // hsl(240, 100%, 50%) → синий
+/// 	}
+/// @example css - Результат
+/// 	.element {
+/// 		color: #ff0000;
+/// 		border-color: hsl(120, 100%, 50%);
+/// 		background-color: hsl(240, 100%, 50%);
+/// 	}
+/// @example scss - Использование в дизайн-системе
+/// 	@use 'sass:list';
+/// 	@use 'sass:string';
+/// 	:root {
+/// 		$primary-triad: color-triad(#2c3e50);
+/// 		--color-primary: #{string.unquote(list.nth($primary-triad, 1))};
+/// 		--color-secondary: #{string.unquote(list.nth($primary-triad, 2))};
+/// 		--color-accent: #{string.unquote(list.nth($primary-triad, 3))};
+/// 	}
+/// @example css - Результат
+/// 	:root {
+/// 		--color-primary: #2c3e50;
+/// 		--color-secondary: hsl(330, 29.032258064516128%, 24.313725490196074%);
+/// 		--color-accent: hsl(90, 29.032258064516128%, 24.313725490196074%);
+/// 	}
+/// @see color-blend
+/// @param {Color} $color - Базовый цвет для построения
+/// 	триады. Может быть в любом формате, поддерживаемом Sass
+/// 	(HEX, RGB, HSL, имя цвета).
+/// 	Цветовой тон (hue) этого цвета используется как отправная
+/// 	точка для расчета двух дополнительных цветов.
+///
+/// @return {List} - Список (list) из трех строковых
+/// 	представлений цветов в формате, который Sass использует
+/// 	для внутреннего хранения (обычно HEX для цветов в
+/// 	пространстве `srgb`). Все цвета сохраняют одинаковые
+/// 	значения насыщенности и светлоты исходного цвета,
+/// 	изменяется только цветовой тон.
+/// - Первый элемент: строковое представление исходного цвета
+/// - Второй элемент: цвет со смещением +120° по цветовому кругу
+/// - Третий элемент: цвет со смещением +240° по цветовому кругу
+@function color-triad($color) {
+
+	// Проверка типа входного параметра: ожидается цветовое значение.
+	// Функция is-color() проверяет, является ли $color валидным цветом CSS.
+	@if not is-color($color) {
+
+		// Если $color не является цветом, возвращаем ошибку через
+		// стандартную функцию логирования. Это предотвращает
+		// некорректные вычисления с нецветовыми данными.
+		@return log-invalid-type(
+			'color-triad',
+			$color,
+			'$color',
+			'color'
+		);
+
+	}
+
+	// Основная логика выполняется только если $color является
+	// корректным цветом.
+	@else {
+
+		// Извлечение компонентов цвета из входного параметра
+		// в пространстве HSL (Hue, Saturation, Lightness).
+		// Функция color.channel() возвращает конкретный канал цвета:
+		$-hue: color.channel($color, "hue", $space: hsl);        // Оттенок: 0-360 градусов
+		$-saturation: color.channel($color, "saturation", $space: hsl); // Насыщенность: 0-100%
+		$-lightness: color.channel($color, "lightness", $space: hsl);   // Яркость: 0-100%
+
+		// Создание триадной цветовой схемы.
+		// Триада - это три цвета, равномерно распределенных
+		// по цветовому кругу (разделенных 120 градусами).
+		//
+		// Формула триады:
+		// 1. Исходный цвет: $color (оттенок = $-hue)
+		// 2. Второй цвет: оттенок = ($-hue + 120) % 360
+		//    (120 градусов по часовой стрелке от исходного)
+		// 3. Третий цвет: оттенок = ($-hue + 240) % 360
+		//    (240 градусов по часовой стрелке от исходного)
+		//
+		// Оператор % 360 гарантирует, что значение оттенка всегда
+		// остается в диапазоне 0-359 градусов (полный круг).
+		//
+		// Функция meta.inspect() преобразует цветовые значения
+		// в строки, чтобы они могли быть корректно представлены
+		// в возвращаемом списке.
+		@return (
+			meta.inspect($color),  // Исходный цвет
+			meta.inspect(hsl(($-hue + 120) % 360, $-saturation, $-lightness)),  // Второй цвет триады
+			meta.inspect(hsl(($-hue + 240) % 360, $-saturation, $-lightness))   // Третий цвет триады
+		);
+
+	}
+
+}

package/modules/utilities/helpers/list/_list-dedupe.scss

@@ -0,0 +1,146 @@
+@use 'sass:list';
+@use '../../loggers/log-invalid-type' as *;
+@use '../../validators/list/is-list-contained' as *;
+@use '../../validators/type-of/is-list' as *;
+
+/// Удаляет дублирующиеся значения из списка.
+///
+/// Функция `list-dedupe()` принимает список и возвращает
+/// новый список, в котором удалены все повторяющиеся
+/// значения, сохраняя только первое вхождение каждого
+/// уникального элемента. Порядок элементов сохраняется.
+///
+/// Полезно для очистки данных, обработки пользовательского
+/// ввода или подготовки списков для дальнейших операций, где
+/// дубликаты нежелательны.
+///
+/// - Функция использует строгое сравнение (оператор ==)
+/// 	для определения дубликатов.
+/// - Для сложных структур (maps, вложенные списки) сравнение
+/// 	может быть неточным.
+/// - Производительность - для больших списков рассмотрите
+/// 	другие подходы.
+/// - Порядок элементов сохраняется, удаляются только
+/// 	последующие дубликаты.
+/// ---
+/// @name list-dedupe
+/// @group utilities-helpers
+/// @since 2025.12.27
+/// @access public
+/// @author Murad Rustamov (therteenten)
+/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
+/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
+/// @link https://sass-lang.com/documentation/values/lists См. также: Sass - Работа со списками
+/// @link https://sass-lang.com/documentation/modules/list См. также: Sass - Модуль для работы со списками
+/// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set См. также: MDN - Set объект в JavaScript
+/// @link https://www.w3schools.com/python/ref_set_difference.asp См. также: W3Schools - Множества в Python
+/// @link https://css-tricks.com/snippets/sass/remove-duplicates-from-list/ См. также: CSS-Tricks - Удаление дубликатов из списка
+/// @link https://stackoverflow.com/questions/30865280 См. также: StackOverflow - Удаление дубликатов в Sass
+/// @example scss - Удаление дубликатов цветов
+/// 	$colors: (#ff0000, #00ff00, #0000ff, #ff0000, #00ff00);
+/// 	$unique-colors: list-dedupe($colors); // Результат: #ff0000, #00ff00, #0000ff
+/// @example scss - Обработка пользовательского ввода
+/// 	$user-tags: ("css", "sass", "design", "css", "ui", "sass");
+/// 	$clean-tags: list-dedupe($user-tags);
+///
+/// 	.tags {
+/// 		@each $tag in $clean-tags {
+/// 			&--#{$tag} { display: inline-block; }
+/// 		}
+/// 	}
+/// @example css - Результат
+/// 	.tags--css {
+/// 		display: inline-block;
+/// 	}
+/// 	.tags--sass {
+/// 		display: inline-block;
+/// 	}
+/// 	.tags--design {
+/// 		display: inline-block;
+/// 	}
+/// 	.tags--ui {
+/// 		display: inline-block;
+/// 	}
+/// @example scss - Подготовка списка для CSS-переменных
+/// 	@use 'sass:list';
+///
+/// 	$font-sizes: (16px, 18px, 20px, 16px, 24px, 18px);
+/// 	$unique-sizes: list-dedupe($font-sizes);
+///
+/// 	:root {
+/// 		@for $i from 1 through list.length($unique-sizes) {
+/// 			--font-size-#{$i}: #{list.nth($unique-sizes, $i)};
+/// 		}
+/// 	}
+/// @example css - Результат
+/// 	:root {
+/// 		--font-size-1: 16px;
+/// 		--font-size-2: 18px;
+/// 		--font-size-3: 20px;
+/// 		--font-size-4: 24px;
+/// 	}
+/// @example scss - Обработка вложенных списков
+/// 	$nested: ((1, 2), (3, 4), (1, 2), (5, 6));
+/// 	$deduped: list-dedupe($nested); //=> Результат: (1, 2) (3, 4) (5, 6)
+/// @param {List} $list - Исходный список, который может
+/// 	содержать дубликаты. Может быть любым списком: цвета,
+/// 	строки, числа, вложенные списки и т.д. Для корректного
+/// 	сравнения элементы должны быть строго равны (==).
+/// @return {List} - Новый список без дублирующихся значений.
+/// 	Сохраняет порядок элементов, оставляя только первое
+/// 	вхождение каждого значения. Если исходный список
+/// 	пустой, возвращает пустой список.
+@function list-dedupe($list) {
+
+	// Проверка типа входного параметра: ожидается список или arglist.
+	// Функция is-list() проверяет, является ли $list валидным списком
+	// или arglist (специальный тип для переменного числа аргументов).
+	@if not is-list($list) {
+
+		// Если $list не является списком, возвращаем ошибку через
+		// стандартную функцию логирования. Это предотвращает
+		// некорректные вычисления с некорректными данными.
+		@return log-invalid-type(
+			'list-dedupe',
+			$list,
+			'$list',
+			('list', 'arglist')
+		);
+
+	}
+
+	// Основная логика выполняется только если $list является
+	// корректным списком или arglist.
+	@else {
+
+		// Инициализация переменной для хранения результата.
+		// $-result будет содержать список без дубликатов.
+		$-result: ();
+
+		// Итерация по всем элементам исходного списка.
+		// Переменная $-item содержит текущий обрабатываемый элемент.
+		@each $-item in $list {
+
+			// Проверка: содержится ли текущий элемент уже в результате.
+			// Используется вспомогательная функция is-list-contained(),
+			// которая должна возвращать true, если элемент уже присутствует
+			// в списке $-result.
+			@if not is-list-contained($-result, $-item) {
+
+				// Если элемент еще не содержится в результате,
+				// добавляем его в конец списка $-result.
+				// Функция list.append() добавляет новый элемент в список.
+				$-result: list.append($-result, $-item);
+
+			}
+
+		}
+
+		// Возвращаем список без дубликатов.
+		// Порядок элементов сохраняется (первое вхождение каждого элемента
+		// сохраняет свою позицию, последующие дубликаты игнорируются).
+		@return $-result;
+
+	}
+
+}

package/modules/utilities/helpers/list/_list-insert-at.scss

@@ -0,0 +1,166 @@
+@use 'sass:list';
+@use '../../loggers/log-invalid-type' as *;
+@use '../../validators/type-of/is-list' as *;
+@use '../../validators/type-of/is-number' as *;
+
+/// Вставляет значение в список по указанному индексу.
+///
+/// Функция создает новый список, вставляя указанное значение
+/// в заданную позицию исходного списка. Если индекс находится
+/// в пределах длины списка, значение вставляется перед
+/// элементом с этим индексом. Если индекс больше длины списка,
+/// значение добавляется в конец списка.
+///
+/// Важные особенности функции:
+/// - Использует 1-based индексацию (первый элемент имеет
+/// 	индекс 1)
+/// - Не изменяет исходный список, возвращает новый
+/// - Если индекс > длины списка, добавляет значение в конец
+/// - Если индекс = 1, вставляет значение в начало списка
+/// - Поддерживает любые типы значений для вставки
+/// - Сохраняет порядок остальных элементов
+/// - Использует локальные переменные с префиксом `$-` для
+/// 	избежания конфликтов
+/// ---
+/// @name list-insert-at
+/// @group utilities-helpers
+/// @since 2025.12.27
+/// @access public
+/// @author Murad Rustamov (therteenten)
+/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
+/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
+/// @link https://sass-lang.com/documentation/modules/list#nth См. также: Официальная документация Sass - Функция list.nth()
+/// @link https://sass-lang.com/documentation/modules/list#length См. также: Официальная документация Sass - Функция list.length()
+/// @link https://sass-lang.com/documentation/values/lists См. также: Официальная документация Sass - Тип данных "Списки"
+/// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice MDN Web Docs - Array.splice()
+/// @link https://css-tricks.com/snippets/sass/ См. также: CSS-Tricks - Коллекция сниппетов Sass
+/// @link https://sass-guidelin.es/ru/#list-functions См. также: Sass Guidelines - Функции для работы со списками
+/// @link https://frontender.info/sass-lists/ См. также: Frontender Magazine - Работа со списками в Sass
+/// @link https://www.w3schools.com/sass/sass_functions_list.php См. также: W3Schools - Функции для работы со списками в Sass
+/// @link https://habr.com/ru/post/156549/ См. также: Habr - Статья "Sass для верстальщика: списки и циклы"
+/// @example scss - Вставка в середину списка
+/// 	@debug list-insert-at((a, b, c, d), "X", 3);  // (a, b, X, c, d)
+/// 	@debug list-insert-at((10, 20, 30, 40), 25, 3); // (10, 20, 25, 30, 40)
+/// 	@debug list-insert-at((red, blue, green), yellow, 2); // (red, yellow, blue, green)
+/// @example scss - Вставка в начало и конец списка
+/// 	@debug list-insert-at((b, c, d), a, 1);     // (a, b, c, d)
+/// 	@debug list-insert-at((a, b, c), d, 4);     // (a, b, c, d)
+/// 	@debug list-insert-at((a, b, c), d, 10);    // (a, b, c, d) (индекс > длины)
+/// @example scss - Вставка в пустой список
+/// 	// @debug list-insert-at((), "first", 1);        // Error: $n: Invalid index 1 for a list with 0 elements.
+/// 	// @debug list-insert-at((), "element", 5);      // Error: $n: Invalid index 1 for a list with 0 elements.
+/// 	@debug list-insert-at(none, "value", 1);      // (value)
+/// @example scss - Вставка разных типов данных
+/// 	@debug list-insert-at((a, b, c), 123, 2);     // (a, 123, b, c)
+/// 	@debug list-insert-at((1, 2, 3), #ff0000, 2); // (1, #ff0000, 2, 3)
+/// 	@debug list-insert-at((true, false), null, 1); // (null, true, false)
+/// @example scss - Практическое использование: расширение палитры
+/// 	$base-colors: (#ff0000, #00ff00, #0000ff);
+/// 	$extended-palette: list-insert-at($base-colors, #ffff00, 3);
+/// 	@debug $extended-palette;  // (#ff0000, #00ff00, #ffff00, #0000ff)
+/// @param {List} $list - Исходный список, в который
+/// 	нужно вставить значение. Может содержать элементы
+/// 	любых типов и может быть пустым.
+/// @param {*} $value - Значение для вставки в список.
+/// 	Может быть любого типа (строка, число, цвет, список и т.д.).
+/// @param {Number} $index - Позиция для вставки значения.
+/// 	Используется 1-based индексация. Если индекс находится
+/// 	в пределах списка (1 ≤ индекс ≤ длина), значение
+/// 	вставляется перед элементом с этим индексом. Если
+/// 	индекс > длины списка, значение добавляется в конец.
+/// @return {List} - Новый список, содержащий все элементы
+/// 	исходного списка с добавленным значением в указанной
+/// 	позиции. Если список был пустым, возвращается список
+/// 	из одного элемента (вставленного значения).
+/// @throws {Error | Warning} - Может выбросить ошибку если
+/// 	`$index` не является числом или если индекс меньше 1,
+/// 	а также предупреждение, если индекс превышает длину
+/// 	списка.
+@function list-insert-at($list, $value, $index) {
+
+	// Проверка типа первого параметра: ожидается список или arglist.
+	// Функция is-list() проверяет, является ли $list валидным списком
+	// или arglist (специальный тип для переменного числа аргументов).
+	@if not is-list($list) {
+
+		// Если $list не является списком, возвращаем ошибку через
+		// стандартную функцию логирования. Это предотвращает
+		// некорректные вычисления с некорректными данными.
+		@return log-invalid-type(
+			'list-insert-at',
+			$list,
+			'$list',
+			('list', 'arglist')
+		);
+
+	}
+
+	// Проверка типа третьего параметра: ожидается числовое значение индекса.
+	// $index определяет позицию, на которую нужно вставить значение в список.
+	// Индексация в Sass начинается с 1, а не с 0.
+	@else if not is-number($index) {
+
+		// Если $index не является числом, возвращаем ошибку.
+		// Проверка выполняется только если $list прошел валидацию.
+		@return log-invalid-type(
+			'list-insert-at',
+			$index,
+			'$index',
+			'number'
+		);
+
+	}
+
+	// Все параметры прошли валидацию - выполняем вставку значения.
+	@else {
+
+		// Инициализация переменной для хранения результата.
+		// $-result будет содержать новый список с вставленным значением.
+		$-result: ();
+
+		// Определение длины исходного списка.
+		// Функция list.length() возвращает количество элементов в списке.
+		$-length: list.length($list);
+
+		// Цикл по всем элементам исходного списка.
+		// Переменная $i принимает значения от 1 до $-length включительно.
+		@for $i from 1 through $-length {
+
+			// Проверка: достигли ли мы позиции для вставки.
+			@if $i == $index {
+
+				// Если текущий индекс равен целевому индексу вставки,
+				// добавляем новое значение в результат перед текущим элементом.
+				$-result: list.append($-result, $value);
+
+			}
+
+			// Добавляем текущий элемент исходного списка в результат.
+			// Функция list.nth() извлекает элемент списка по указанному индексу.
+			$-result: list.append($-result, list.nth($list, $i));
+
+		}
+
+		// Обработка случая, когда индекс вставки больше длины списка.
+		// В этом случае значение добавляется в конец списка.
+		@if $index > $-length {
+
+			// Выводим предупреждение о том, что индекс превышает длину списка.
+			// Это помогает обнаружить потенциальные ошибки в логике программы.
+			@warn '$index (#{$index}) > $-length (#{$-length}): Индекс больше длины списка. Значение будет добавлено в конец!';
+
+			// Добавляем значение в конец списка результата.
+			$-result: list.append($-result, $value);
+
+		}
+
+		// Возвращаем новый список с вставленным значением.
+		// Если индекс был в пределах длины списка, значение вставлено
+		// на указанную позицию. Если индекс превышал длину, значение
+		// добавлено в конец. Если индекс меньше 1, поведение не определено
+		// (в текущей реализации значение не будет добавлено).
+		@return $-result;
+
+	}
+
+}

package/modules/utilities/helpers/list/_list-merge.scss

@@ -0,0 +1,86 @@
+@use 'sass:list';
+
+/// Объединяет несколько списков в один плоский список.
+///
+/// Функция принимает произвольное количество списков и
+/// объединяет их элементы в единый результирующий список.
+/// Порядок элементов сохраняется: сначала идут все элементы
+/// первого списка, затем второго, и так далее.
+///
+/// Важные особенности:
+/// - Функция не выполняет рекурсивное разворачивание вложенных
+/// 	списков
+/// - Не удаляет дубликаты (используйте list-dedupe() при
+/// 	необходимости)
+/// - Сохраняет порядок элементов
+/// - Использует локальные переменные с префиксом `$-` для
+/// 	избежания конфликтов
+/// - Аналогична `list.join()`, но поддерживает произвольное
+/// 	количество аргументов
+/// ---
+/// @name list-merge
+/// @group utilities-helpers
+/// @since 2025.12.27
+/// @access public
+/// @author Murad Rustamov (therteenten)
+/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
+/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
+/// @link https://sass-lang.com/documentation/modules/list#join См. также: Официальная документация Sass - Функция list.join()
+/// @link https://sass-lang.com/documentation/values/lists См. также: Официальная документация Sass - Тип данных "Списки"
+/// @link https://sass-lang.com/documentation/at-rules/function#taking-arbitrary-arguments См. также: Документация Sass - Функции с произвольными аргументами
+/// @link https://stackoverflow.com/questions/21832031/how-can-i-merge-multiple-lists-together-in-sass См. также: Stack Overflow - Как объединить несколько списков в Sass
+/// @link https://css-tricks.com/snippets/sass/ См. также: CSS-Tricks - Коллекция сниппетов Sass
+/// @link https://sass-guidelin.es/ru/#list-functions См. также: Sass Guidelines - Функции для работы со списками
+/// @link https://frontender.info/sass-lists/ См. также: Frontender Magazine - Работа со списками в Sass
+/// @link https://www.w3schools.com/sass/sass_functions_list.php См. также: W3Schools - Функции для работы со списками в Sass
+/// @link https://habr.com/ru/post/156549/ См. также: Habr - Статья "Sass для верстальщика: списки и циклы"
+/// @example scss - Объединение двух списков
+/// 	$list1: a, b, c;
+/// 	$list2: d, e, f;
+/// 	@debug list-merge($list1, $list2); // (a, b, c, d, e, f);
+/// @example scss - Объединение трех списков
+/// 	$colors: red, blue;
+/// 	$sizes: small, medium, large;
+/// 	$shapes: circle, square;
+/// 	@debug list-merge($colors, $sizes, $shapes); // (red, blue, small, medium, large, circle, square)
+/// @example scss - Объединение списков разных типов
+/// 	@debug list-merge((1, 2, 3), (a, b, c), (true, false)); // (1, 2, 3, a, b, c, true, false)
+/// @example scss - Объединение вложенных списков (без рекурсии)
+/// 	$nested: ((1, 2), (3, 4));
+/// 	@debug list-merge($nested); // ((1, 2), (3, 4));
+/// @example scss - Объединение пустых списков
+/// 	@debug list-merge((), (a, b), ()); // (a, b)
+/// 	@debug list-merge();               // ()
+/// @example scss - Использование в CSS функциях
+/// 	$transition-props: opacity, transform;
+/// 	$transition-durations: 0.3s, 0.5s;
+///
+/// 	.test {
+/// 		transition: list-merge($transition-props, $transition-durations); // transition: opacity, transform, 0.3s, 0.5s;
+/// 	}
+/// @example css - Результат
+/// 	.test {
+/// 		transition: opacity transform 0.3s 0.5s;
+/// 	}
+/// @param {ArgList} $lists... - Произвольное количество
+/// 	списков для объединения. Каждый аргумент должен быть
+/// 	списком. Функция использует `arglist` для поддержки
+/// 	переменного числа аргументов.
+/// @return {List} - Новый список, содержащий все элементы из
+/// 	входных списков в порядке их следования. Если ни одного
+/// 	списка не передано, возвращается пустой список `()`.
+/// @throws Не выбрасывает ошибок, но если передать не список,
+/// 	элемент будет добавлен как есть (не рекомендуется).
+@function list-merge($lists...) {
+
+	$-result: ();
+
+	@each $-list in $lists {
+		@each $-item in $-list {
+			$-result: list.append($-result, $-item);
+		}
+	}
+
+	@return $-result;
+
+}