@omnisass/library 0.2.0 → 2026.1.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +13 -0
- package/.omnisass/scripts/bump-version.sh +288 -0
- package/.sassdoc.yaml +21 -0
- package/.vscode/settings.json +17 -0
- package/_configs.scss +10 -45
- package/index.scss +5 -91
- package/modules/utilities/converters/_convert-em2px.scss +3 -49
- package/modules/utilities/converters/_convert-hex2rgb.scss +2 -44
- package/modules/utilities/converters/_convert-hex2rgba.scss +2 -57
- package/modules/utilities/converters/_convert-px2em.scss +3 -62
- package/modules/utilities/converters/_convert-px2rem.scss +3 -62
- package/modules/utilities/converters/_convert-rem2px.scss +3 -62
- package/modules/utilities/converters/_index.scss +10 -0
- package/modules/utilities/getters/_index.scss +23 -0
- package/modules/utilities/getters/color/_get-color-brightness.scss +2 -48
- package/modules/utilities/getters/color/_get-color-darkest.scss +13 -68
- package/modules/utilities/getters/list/_get-list-item-end.scss +2 -29
- package/modules/utilities/getters/list/_get-list-item-start.scss +2 -29
- package/modules/utilities/getters/list/_get-list-item.scss +6 -82
- package/modules/utilities/getters/number/_get-number-from-percent.scss +2 -40
- package/modules/utilities/getters/number/_get-number-height-by-ratio.scss +3 -35
- package/modules/utilities/getters/number/_get-number-max-safe.scss +112 -0
- package/modules/utilities/getters/number/_get-number-max.scss +10 -88
- package/modules/utilities/getters/number/_get-number-min-safe.scss +114 -0
- package/modules/utilities/getters/number/_get-number-min.scss +9 -84
- package/modules/utilities/getters/number/_get-number-percentage-of.scss +2 -58
- package/modules/utilities/getters/number/_get-number-unit.scss +5 -46
- package/modules/utilities/getters/number/_get-number-width-by-ratio.scss +3 -56
- package/modules/utilities/helpers/_index.scss +44 -0
- package/modules/utilities/helpers/color/_color-blend-steps.scss +5 -89
- package/modules/utilities/helpers/color/_color-blend.scss +11 -85
- package/modules/utilities/helpers/color/_color-hue-shift.scss +7 -61
- package/modules/utilities/helpers/color/_color-scale.scss +7 -74
- package/modules/utilities/helpers/color/_color-shade.scss +2 -60
- package/modules/utilities/helpers/color/_color-tint.scss +2 -60
- package/modules/utilities/helpers/color/_color-triad.scss +9 -53
- package/modules/utilities/helpers/list/_list-dedupe.scss +9 -50
- package/modules/utilities/helpers/list/_list-insert-at.scss +16 -86
- package/modules/utilities/helpers/list/_list-merge.scss +1 -1
- package/modules/utilities/helpers/list/_list-remove-at.scss +9 -71
- package/modules/utilities/helpers/list/_list-sum-numbers-safe.scss +17 -81
- package/modules/utilities/helpers/list/_list-sum-numbers.scss +9 -57
- package/modules/utilities/helpers/number/_number-ceil-to.scss +1 -1
- package/modules/utilities/helpers/number/_number-clamp-max.scss +1 -1
- package/modules/utilities/helpers/number/_number-clamp-min.scss +1 -1
- package/modules/utilities/helpers/number/_number-clamp.scss +1 -1
- package/modules/utilities/helpers/number/_number-denormalize.scss +1 -1
- package/modules/utilities/helpers/number/_number-fibonacci.scss +2 -2
- package/modules/utilities/helpers/number/_number-floor-to.scss +1 -1
- package/modules/utilities/helpers/number/_number-format-with-separator.scss +4 -4
- package/modules/utilities/helpers/number/_number-normalize.scss +1 -1
- package/modules/utilities/helpers/number/_number-random-between-int.scss +1 -1
- package/modules/utilities/helpers/number/_number-random-between.scss +1 -1
- package/modules/utilities/helpers/number/_number-range.scss +7 -7
- package/modules/utilities/helpers/number/_number-round-to-nearest.scss +1 -1
- package/modules/utilities/helpers/number/_number-round-to.scss +1 -1
- package/modules/utilities/helpers/number/_number-strip-unit.scss +2 -14
- package/modules/utilities/helpers/string/_string-capitalize.scss +1 -1
- package/modules/utilities/helpers/string/_string-replace.scss +1 -1
- package/modules/utilities/helpers/string/_string-trim-end.scss +2 -2
- package/modules/utilities/helpers/string/_string-trim-start.scss +2 -2
- package/modules/utilities/helpers/string/_string-trim.scss +1 -1
- package/modules/utilities/loggers/_index.scss +6 -0
- package/modules/utilities/validators/_index.scss +38 -0
- package/modules/utilities/validators/{misc/_is-time.scss → _is-time.scss} +2 -2
- package/modules/utilities/validators/color/_is-color-light.scss +1 -1
- package/modules/utilities/validators/color/_is-color-list.scss +1 -1
- package/modules/utilities/validators/list/_is-list-contained.scss +1 -1
- package/modules/utilities/validators/number/_is-int-even.scss +1 -1
- package/modules/utilities/validators/number/_is-int-odd.scss +1 -1
- package/modules/utilities/validators/number/_is-int.scss +1 -1
- package/modules/utilities/validators/number/_is-number-has-unit.scss +1 -1
- package/modules/utilities/validators/number/_is-number-negative.scss +1 -1
- package/modules/utilities/validators/number/_is-number-positive.scss +1 -1
- package/modules/utilities/validators/number/_is-number-unitless.scss +1 -1
- package/modules/utilities/validators/number/_is-number-zero.scss +1 -1
- package/modules/utilities/validators/string/_is-string-contained.scss +25 -25
- package/modules/utilities/validators/string/_is-string-empty.scss +1 -1
- package/modules/utilities/validators/string/_is-string-ending-with.scss +1 -1
- package/modules/utilities/validators/string/_is-string-starting-with.scss +1 -1
- package/modules/utilities/validators/type-of/_is-boolean.scss +1 -1
- package/modules/utilities/validators/type-of/_is-color.scss +1 -1
- package/modules/utilities/validators/type-of/_is-list.scss +1 -1
- package/modules/utilities/validators/type-of/_is-map.scss +1 -1
- package/modules/utilities/validators/type-of/_is-number.scss +1 -1
- package/modules/utilities/validators/type-of/_is-string.scss +1 -1
- package/modules/utilities/validators/type-of/_is-type.scss +1 -1
- package/package.json +5 -6
- package/package.scss +3 -3
- package/playground/index.scss +8 -0
- package/modules/utilities/converters/_convert-camel2kebab.scss +0 -186
- package/modules/utilities/converters/_convert-kebab2camel.scss +0 -232
- package/modules/utilities/converters/_convert-kebab2snake.scss +0 -118
- package/modules/utilities/converters/_convert-snake2kebab.scss +0 -173
- package/modules/utilities/helpers/misc/_url-encode.configs.scss +0 -64
- package/modules/utilities/helpers/misc/_url-encode.scss +0 -148
- package/modules/utilities/loggers/_log-invalid-type.scss +0 -151
- package/modules/utilities/loggers/_log-invalid-value.scss +0 -151
- package/test.md +0 -168
- package/test.scss +0 -405
- package/test.sh +0 -149
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
@use '../../
|
|
2
|
-
@use '../../validators/type-of/is-number' as *;
|
|
3
|
-
@use '../../validators/type-of/is-list' as *;
|
|
1
|
+
@use '../../validators' as validators; // need type-of/is-number
|
|
4
2
|
|
|
5
3
|
/// Находит минимальное числовое значение в списке.
|
|
6
4
|
///
|
|
@@ -23,7 +21,7 @@
|
|
|
23
21
|
/// ---
|
|
24
22
|
/// @name get-number-min
|
|
25
23
|
/// @group utilities-getters
|
|
26
|
-
/// @since
|
|
24
|
+
/// @since 0.0.1
|
|
27
25
|
/// @access public
|
|
28
26
|
/// @author Murad Rustamov (therteenten)
|
|
29
27
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -63,6 +61,7 @@
|
|
|
63
61
|
/// @example scss - Поиск минимальной ширины контейнера
|
|
64
62
|
/// $container-widths: 320px, 768px, 1024px, 1280px;
|
|
65
63
|
/// @debug get-number-min($container-widths); // 320px
|
|
64
|
+
/// @see get-number-min-safe
|
|
66
65
|
/// @param {List} $list - Список значений, который может
|
|
67
66
|
/// содержать элементы разных типов. Функция будет
|
|
68
67
|
/// обрабатывать только числовые элементы.
|
|
@@ -73,90 +72,16 @@
|
|
|
73
72
|
/// @throws {Error} - Может выбросить ошибку при попытке
|
|
74
73
|
/// сравнить числа с несовместимыми единицами измерения.
|
|
75
74
|
@function get-number-min($list) {
|
|
75
|
+
$-min: null;
|
|
76
76
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
$-result: null;
|
|
82
|
-
|
|
83
|
-
// Первичная проверка типа входного параметра.
|
|
84
|
-
// Функция ожидает получить список (list) или arglist.
|
|
85
|
-
@if not is-list($list) {
|
|
86
|
-
|
|
87
|
-
// Если $list не является списком или arglist,
|
|
88
|
-
// вызываем стандартизированную функцию логирования ошибок.
|
|
89
|
-
// Это обеспечивает единообразные сообщения об ошибках
|
|
90
|
-
// во всей кодовой базе.
|
|
91
|
-
@return log-invalid-type(
|
|
92
|
-
'get-number-min',
|
|
93
|
-
$list,
|
|
94
|
-
'$list',
|
|
95
|
-
('list', 'arglist')
|
|
96
|
-
);
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// Основной блок обработки выполняется только если
|
|
101
|
-
// входной параметр прошел валидацию как корректный список.
|
|
102
|
-
@else {
|
|
103
|
-
|
|
104
|
-
// Итерация по всем элементам списка.
|
|
105
|
-
// Переменная $-item содержит текущий обрабатываемый элемент.
|
|
106
|
-
@each $-item in $list {
|
|
107
|
-
|
|
108
|
-
// Проверка типа текущего элемента.
|
|
109
|
-
// Функция is-number возвращает true для:
|
|
110
|
-
// - Целых и дробных чисел (42, 3.14)
|
|
111
|
-
// - Чисел с единицами измерения (10px, 2rem, 0.5em)
|
|
112
|
-
// Возвращает false для строк, булевых значений, null,
|
|
113
|
-
// карт и т.д.
|
|
114
|
-
@if is-number($-item) {
|
|
115
|
-
|
|
116
|
-
// Обновление текущего минимального значения.
|
|
117
|
-
// Условие выполняется в двух случаях:
|
|
118
|
-
// 1. $-result == null: это первое найденное число
|
|
119
|
-
// в списке
|
|
120
|
-
// 2. $-item < $-result: текущее число меньше текущего
|
|
121
|
-
// минимума
|
|
122
|
-
//
|
|
123
|
-
// Оператор < в Sass автоматически проверяет совместимость
|
|
124
|
-
// единиц измерения. Сравнение 10px < 2em вызовет ошибку
|
|
125
|
-
// выполнения Sass.
|
|
126
|
-
@if $-result == null or $-item < $-result {
|
|
127
|
-
$-result: $-item;
|
|
128
|
-
}
|
|
129
|
-
|
|
77
|
+
@each $-item in $list {
|
|
78
|
+
@if validators.is-number($-item) {
|
|
79
|
+
@if $-min == null or $-item < $-min {
|
|
80
|
+
$-min: $-item;
|
|
130
81
|
}
|
|
131
|
-
|
|
132
|
-
// Обработка случая, когда элемент не является числом.
|
|
133
|
-
@else {
|
|
134
|
-
|
|
135
|
-
// При обнаружении нечислового элемента функция немедленно
|
|
136
|
-
// прерывает выполнение. Это "fail-fast" подход, который
|
|
137
|
-
// предотвращает скрытые ошибки и неожиданное поведение.
|
|
138
|
-
@return log-invalid-type(
|
|
139
|
-
'get-number-min',
|
|
140
|
-
$-item,
|
|
141
|
-
'$-item',
|
|
142
|
-
'number'
|
|
143
|
-
);
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
|
|
147
82
|
}
|
|
148
|
-
|
|
149
83
|
}
|
|
150
84
|
|
|
151
|
-
|
|
152
|
-
// Возможные возвращаемые значения:
|
|
153
|
-
// - null: если список был пустым или не содержал элементов
|
|
154
|
-
// - число: наименьшее значение из списка
|
|
155
|
-
//
|
|
156
|
-
// Если выполнение дошло до этой точки, значит:
|
|
157
|
-
// 1. $list был корректным списком
|
|
158
|
-
// 2. Все элементы списка были числами
|
|
159
|
-
// 3. Ни один элемент не вызвал ошибку
|
|
160
|
-
@return $-result;
|
|
85
|
+
@return $-min;
|
|
161
86
|
|
|
162
87
|
}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
@use 'sass:math';
|
|
2
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../../validators/type-of/is-number' as *;
|
|
4
2
|
|
|
5
3
|
/// Вычисляет процентное отношение части к целому.
|
|
6
4
|
///
|
|
@@ -20,7 +18,7 @@
|
|
|
20
18
|
/// ---
|
|
21
19
|
/// @name get-number-percentage-of
|
|
22
20
|
/// @group utilities-getters
|
|
23
|
-
/// @since
|
|
21
|
+
/// @since 0.0.1
|
|
24
22
|
/// @access public
|
|
25
23
|
/// @author Murad Rustamov (therteenten)
|
|
26
24
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -91,59 +89,5 @@
|
|
|
91
89
|
/// @throws {Error} - Может выбросить ошибку деления на ноль,
|
|
92
90
|
/// если `$whole` равно 0, или если параметры не являются числами.
|
|
93
91
|
@function get-number-percentage-of($part, $whole) {
|
|
94
|
-
|
|
95
|
-
@if not is-number($part) {
|
|
96
|
-
|
|
97
|
-
// Проверка типа параметра $part.
|
|
98
|
-
// Если $part не является числом, логируем ошибку и
|
|
99
|
-
// прерываем выполнение.
|
|
100
|
-
@return log-invalid-type(
|
|
101
|
-
'get-number-percentage-of',
|
|
102
|
-
$part,
|
|
103
|
-
'$part',
|
|
104
|
-
'number'
|
|
105
|
-
);
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
@else if not is-number($whole) {
|
|
110
|
-
|
|
111
|
-
// Проверка типа параметра $whole.
|
|
112
|
-
// Выполняется только если $part прошел проверку.
|
|
113
|
-
@return log-invalid-type(
|
|
114
|
-
'get-number-percentage-of',
|
|
115
|
-
$whole,
|
|
116
|
-
'$whole',
|
|
117
|
-
'number'
|
|
118
|
-
);
|
|
119
|
-
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
// Критическая проверка: предотвращение деления на ноль
|
|
123
|
-
//
|
|
124
|
-
// Математический контекст:
|
|
125
|
-
// - Деление любого числа на ноль не определено в математике
|
|
126
|
-
// - В вычислениях это приводит либо к бесконечности, либо к
|
|
127
|
-
// ошибке
|
|
128
|
-
// - В Sass попытка деления на ноль вызывает ошибку компиляции
|
|
129
|
-
//
|
|
130
|
-
// Почему эта проверка важна:
|
|
131
|
-
// 1. Предотвращает падение компиляции Sass с неясной ошибкой
|
|
132
|
-
// 2. Дает разработчику понятное сообщение о проблеме
|
|
133
|
-
// 3. Сохраняет стабильность системы сборки
|
|
134
|
-
@else if $whole == 0 {
|
|
135
|
-
@error 'calc(infinity * 1%): You can\'t divide by zero!';
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
@else {
|
|
139
|
-
|
|
140
|
-
// Оба параметра являются числами.
|
|
141
|
-
// Вычисляем процентное отношение:
|
|
142
|
-
// 1. math.div($part, $whole) - безопасное деление
|
|
143
|
-
// 2. math.percentage() - преобразует десятичную дробь
|
|
144
|
-
// в процент
|
|
145
|
-
@return math.percentage(math.div($part, $whole));
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
|
|
92
|
+
@return math.percentage(math.div($part, $whole));
|
|
149
93
|
}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
@use 'sass:math';
|
|
2
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../../validators/type-of/is-number' as *;
|
|
4
2
|
|
|
5
3
|
/// Возвращает единицы измерения числа в виде строки.
|
|
6
4
|
///
|
|
@@ -19,7 +17,7 @@
|
|
|
19
17
|
/// ---
|
|
20
18
|
/// @name get-number-unit
|
|
21
19
|
/// @group utilities-getters
|
|
22
|
-
/// @since
|
|
20
|
+
/// @since 0.0.1
|
|
23
21
|
/// @access public
|
|
24
22
|
/// @author Murad Rustamov (therteenten)
|
|
25
23
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -57,8 +55,9 @@
|
|
|
57
55
|
/// @debug get-number-unit(null); // Ошибка, т.к. неподходящий тип
|
|
58
56
|
/// @debug get-number-unit(auto); // Ошибка, т.к. неподходящий тип
|
|
59
57
|
/// @debug get-number-unit((16, "px")); // Ошибка, т.к. неподходящий тип
|
|
60
|
-
/// @param {
|
|
61
|
-
///
|
|
58
|
+
/// @param {*} $value - Значение, единицы измерения которого
|
|
59
|
+
/// нужно получить. Может быть любого типа, но для
|
|
60
|
+
/// нечисловых значений функция вернет пустую строку.
|
|
62
61
|
/// @return {String} - Строковое представление единиц
|
|
63
62
|
/// измерения числа. Для чисел с единицами измерения
|
|
64
63
|
/// возвращается строка с этими единицами. Для
|
|
@@ -67,45 +66,5 @@
|
|
|
67
66
|
/// @throws {Error} - Не выбрасывает ошибок, только
|
|
68
67
|
/// если значение является числом.
|
|
69
68
|
@function get-number-unit($value) {
|
|
70
|
-
|
|
71
|
-
@if not is-number($value) {
|
|
72
|
-
|
|
73
|
-
// Проверка типа входного параметра.
|
|
74
|
-
// Функция ожидает получить числовое значение любого типа:
|
|
75
|
-
// - Целые числа (42)
|
|
76
|
-
// - Дробные числа (3.14)
|
|
77
|
-
// - Числа с единицами измерения (10px, 2rem, 0.5em, 50%)
|
|
78
|
-
//
|
|
79
|
-
// Если $value не является числом, вызываем стандартизированную
|
|
80
|
-
// функцию логирования ошибок для обеспечения единообразия
|
|
81
|
-
// сообщений об ошибках в проекте.
|
|
82
|
-
@return log-invalid-type(
|
|
83
|
-
'get-number-unit',
|
|
84
|
-
$value,
|
|
85
|
-
'$value',
|
|
86
|
-
'number'
|
|
87
|
-
);
|
|
88
|
-
|
|
89
|
-
} @else {
|
|
90
|
-
|
|
91
|
-
// Основная логика выполняется только если валидация
|
|
92
|
-
// типа прошла успешно.
|
|
93
|
-
//
|
|
94
|
-
// Используем встроенную функцию Sass math.unit():
|
|
95
|
-
// - Извлекает единицу измерения из числа как строку
|
|
96
|
-
// - Для безразмерных чисел возвращает пустую строку ("")
|
|
97
|
-
// - Сохраняет регистр единиц (px, PX, Px - все разные строки)
|
|
98
|
-
// - Не нормализует единицы (1cm и 10mm останутся разными строками)
|
|
99
|
-
//
|
|
100
|
-
// Примеры работы math.unit():
|
|
101
|
-
// - math.unit(10px) → "px"
|
|
102
|
-
// - math.unit(2.5rem) → "rem"
|
|
103
|
-
// - math.unit(50%) → "%"
|
|
104
|
-
// - math.unit(1cm) → "cm"
|
|
105
|
-
// - math.unit(42) → ""
|
|
106
|
-
// - math.unit(0) → ""
|
|
107
|
-
@return math.unit($value);
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
|
|
69
|
+
@return math.unit($value);
|
|
111
70
|
}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
@use 'sass:math';
|
|
2
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../../validators/type-of/is-number' as *;
|
|
4
2
|
|
|
5
3
|
/// Вычисляет ширину на основе высоты и соотношения сторон.
|
|
6
4
|
///
|
|
@@ -44,7 +42,7 @@
|
|
|
44
42
|
/// ---
|
|
45
43
|
/// @name get-number-width-by-ratio
|
|
46
44
|
/// @group utilities-getters
|
|
47
|
-
/// @since
|
|
45
|
+
/// @since 0.0.1
|
|
48
46
|
/// @access public
|
|
49
47
|
/// @author Murad Rustamov (therteenten)
|
|
50
48
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -156,64 +154,13 @@
|
|
|
156
154
|
/// `width = height × ratio`. Сохраняет единицы измерения
|
|
157
155
|
/// параметра `$height`.
|
|
158
156
|
@function get-number-width-by-ratio($height, $ratio) {
|
|
159
|
-
|
|
160
|
-
@if not is-number($height) {
|
|
161
|
-
|
|
162
|
-
// Валидация первого параметра: высота.
|
|
163
|
-
// Функция ожидает числовое значение, которое может содержать
|
|
164
|
-
// единицы измерения (px, rem, em, %, и т.д.).
|
|
165
|
-
//
|
|
166
|
-
// Если $height не является числом (например, строка, булево
|
|
167
|
-
// значение), вызываем стандартизированную функцию
|
|
168
|
-
// логирования ошибок.
|
|
169
|
-
@return log-invalid-type(
|
|
170
|
-
'get-number-width-by-ratio',
|
|
171
|
-
$height,
|
|
172
|
-
'$height',
|
|
173
|
-
'number'
|
|
174
|
-
);
|
|
175
|
-
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
@else if not is-number($ratio) {
|
|
179
|
-
|
|
180
|
-
// Валидация второго параметра: соотношение сторон.
|
|
181
|
-
// Соотношение должно быть числом (чаще всего безразмерным).
|
|
182
|
-
//
|
|
183
|
-
// Проверка выполняется только если $height прошел валидацию.
|
|
184
|
-
// Это последовательный подход fail-fast (быстрая остановка
|
|
185
|
-
// при ошибке).
|
|
186
|
-
@return log-invalid-type(
|
|
187
|
-
'get-number-width-by-ratio',
|
|
188
|
-
$ratio,
|
|
189
|
-
'$ratio',
|
|
190
|
-
'number'
|
|
191
|
-
);
|
|
192
|
-
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
@else {
|
|
196
|
-
|
|
197
|
-
// Оба параметра валидны - выполняем вычисление.
|
|
198
|
-
//
|
|
199
|
-
// Формула: ширина = высота × соотношение.
|
|
200
|
-
//
|
|
201
|
-
// Важные аспекты:
|
|
202
|
-
// 1. Умножение $height (с единицами) на $ratio (безразмерное)
|
|
203
|
-
// сохраняет единицы измерения из $height
|
|
204
|
-
// 2. Если $ratio также имеет единицы, Sass попытается их
|
|
205
|
-
// перемножить, что может привести к неожиданным результатам
|
|
206
|
-
// 3. Рекомендуется передавать $ratio как безразмерное число
|
|
207
|
-
@return $height * $ratio;
|
|
208
|
-
|
|
209
|
-
}
|
|
210
|
-
|
|
157
|
+
@return $height * $ratio;
|
|
211
158
|
}
|
|
212
159
|
|
|
213
160
|
/// @name get-width-by-ratio
|
|
214
161
|
/// @alias get-number-width-by-ratio
|
|
215
162
|
/// @group utilities-aliases
|
|
216
|
-
/// @since
|
|
163
|
+
/// @since 0.0.1
|
|
217
164
|
/// @access public
|
|
218
165
|
/// @author Murad Rustamov (therteenten)
|
|
219
166
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// @group utilities-helpers
|
|
3
|
+
////
|
|
4
|
+
|
|
5
|
+
// Colors
|
|
6
|
+
@forward 'color/color-blend';
|
|
7
|
+
@forward 'color/color-blend-steps';
|
|
8
|
+
@forward 'color/color-hue-shift';
|
|
9
|
+
@forward 'color/color-scale';
|
|
10
|
+
@forward 'color/color-shade';
|
|
11
|
+
@forward 'color/color-tint';
|
|
12
|
+
@forward 'color/color-triad';
|
|
13
|
+
|
|
14
|
+
// List
|
|
15
|
+
@forward 'list/list-dedupe';
|
|
16
|
+
@forward 'list/list-insert-at';
|
|
17
|
+
@forward 'list/list-merge';
|
|
18
|
+
@forward 'list/list-sum-numbers';
|
|
19
|
+
@forward 'list/list-sum-numbers-safe';
|
|
20
|
+
@forward 'list/list-remove-at';
|
|
21
|
+
|
|
22
|
+
// Number
|
|
23
|
+
@forward 'number/number-ceil-to';
|
|
24
|
+
@forward 'number/number-clamp';
|
|
25
|
+
@forward 'number/number-clamp-max';
|
|
26
|
+
@forward 'number/number-clamp-min';
|
|
27
|
+
@forward 'number/number-denormalize';
|
|
28
|
+
@forward 'number/number-fibonacci';
|
|
29
|
+
@forward 'number/number-floor-to';
|
|
30
|
+
@forward 'number/number-format-with-separator';
|
|
31
|
+
@forward 'number/number-normalize';
|
|
32
|
+
@forward 'number/number-random-between';
|
|
33
|
+
@forward 'number/number-random-between-int';
|
|
34
|
+
@forward 'number/number-range';
|
|
35
|
+
@forward 'number/number-round-to';
|
|
36
|
+
@forward 'number/number-round-to-nearest';
|
|
37
|
+
@forward 'number/number-strip-unit';
|
|
38
|
+
|
|
39
|
+
// String
|
|
40
|
+
@forward 'string/string-capitalize';
|
|
41
|
+
@forward 'string/string-replace';
|
|
42
|
+
@forward 'string/string-trim';
|
|
43
|
+
@forward 'string/string-trim-end';
|
|
44
|
+
@forward 'string/string-trim-start';
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
@use 'sass:math';
|
|
2
2
|
@use 'sass:list';
|
|
3
3
|
@use 'sass:color';
|
|
4
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
5
|
-
@use '../../validators/type-of/is-color' as *;
|
|
6
|
-
@use '../../validators/type-of/is-number' as *;
|
|
7
4
|
|
|
8
5
|
/// Создает последовательность равномерно распределенных
|
|
9
6
|
/// цветов между двумя точками.
|
|
@@ -25,7 +22,7 @@
|
|
|
25
22
|
/// ---
|
|
26
23
|
/// @name color-blend-steps
|
|
27
24
|
/// @group utilities-helpers
|
|
28
|
-
/// @since
|
|
25
|
+
/// @since 0.0.1
|
|
29
26
|
/// @access public
|
|
30
27
|
/// @author Murad Rustamov (therteenten)
|
|
31
28
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -118,93 +115,12 @@
|
|
|
118
115
|
/// - Промежуточные элементы: равномерно распределенные смеси
|
|
119
116
|
/// - Всего элементов: `$steps + 2`
|
|
120
117
|
@function color-blend-steps($color-start, $color-end, $steps: 5) {
|
|
121
|
-
|
|
122
|
-
// Инициализация списка для хранения промежуточных цветов.
|
|
123
|
-
// Результатом функции будет список (массив) цветов,
|
|
124
|
-
// представляющих градиентный переход от начального цвета
|
|
125
|
-
// к конечному.
|
|
126
118
|
$-colors: ();
|
|
127
119
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
@if not is-color($color-start) {
|
|
132
|
-
|
|
133
|
-
// Если $color-start не является цветом, возвращаем ошибку через
|
|
134
|
-
// стандартную функцию логирования. Это предотвращает
|
|
135
|
-
// некорректные вычисления с нецветовыми данными.
|
|
136
|
-
@return log-invalid-type(
|
|
137
|
-
'color-blend-steps',
|
|
138
|
-
$color-start,
|
|
139
|
-
'$color-start',
|
|
140
|
-
'color'
|
|
141
|
-
);
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
// Проверка типа второго параметра: ожидается конечный цвет.
|
|
146
|
-
// Проверка выполняется только если $color-start прошел валидацию.
|
|
147
|
-
@else if not is-color($color-end) {
|
|
148
|
-
|
|
149
|
-
// Если $color-end не является цветом, возвращаем ошибку.
|
|
150
|
-
@return log-invalid-type(
|
|
151
|
-
'color-blend-steps',
|
|
152
|
-
$color-end,
|
|
153
|
-
'$color-end',
|
|
154
|
-
'color'
|
|
155
|
-
);
|
|
156
|
-
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
// Проверка типа третьего параметра: ожидается количество шагов.
|
|
160
|
-
// $steps определяет, сколько промежуточных цветов будет сгенерировано
|
|
161
|
-
// между начальным и конечным цветом.
|
|
162
|
-
@else if not is-number($steps) {
|
|
163
|
-
|
|
164
|
-
// Если $steps не является числом, возвращаем ошибку.
|
|
165
|
-
@return log-invalid-type(
|
|
166
|
-
'color-blend-steps',
|
|
167
|
-
$steps,
|
|
168
|
-
'$steps',
|
|
169
|
-
'number'
|
|
170
|
-
);
|
|
171
|
-
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
// Все параметры прошли валидацию - выполняем генерацию цветов.
|
|
175
|
-
@else {
|
|
176
|
-
|
|
177
|
-
// Цикл генерации промежуточных цветов.
|
|
178
|
-
// Переменная $i принимает значения от 0 до $steps включительно.
|
|
179
|
-
// Это создает $steps + 1 цвет в итоговом списке
|
|
180
|
-
// (включая начальный и конечный цвета).
|
|
181
|
-
@for $i from 0 through $steps {
|
|
182
|
-
|
|
183
|
-
// Вычисление процентного соотношения для текущего шага.
|
|
184
|
-
// Формула: (текущий шаг) × (100% / общее количество шагов)
|
|
185
|
-
// Пример для 5 шагов: шаги будут на 0%, 20%, 40%, 60%, 80%, 100%
|
|
186
|
-
$-percentage: $i * math.div(100, $steps);
|
|
187
|
-
|
|
188
|
-
// Создание промежуточного цвета с помощью функции color.mix()
|
|
189
|
-
// color.mix() смешивает два цвета в указанной пропорции.
|
|
190
|
-
// Параметры:
|
|
191
|
-
// - $color-end: первый цвет для смешивания
|
|
192
|
-
// - $color-start: второй цвет для смешивания
|
|
193
|
-
// - $-percentage * 1%: процентное соотношение
|
|
194
|
-
// (сколько процентов $color-start в смеси)
|
|
195
|
-
//
|
|
196
|
-
// Примечание: порядок параметров в color.mix() важен:
|
|
197
|
-
// - При $-percentage = 0% → 100% $color-end, 0% $color-start
|
|
198
|
-
// - При $-percentage = 100% → 0% $color-end, 100% $color-start
|
|
199
|
-
$-colors: list.append($-colors, color.mix($color-end, $color-start, $-percentage * 1%));
|
|
200
|
-
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
// Возвращаем список сгенерированных цветов.
|
|
204
|
-
// Список содержит $steps + 1 элементов, равномерно распределенных
|
|
205
|
-
// между начальным и конечным цветом.
|
|
206
|
-
@return $-colors;
|
|
207
|
-
|
|
120
|
+
@for $-i from 0 through $steps {
|
|
121
|
+
$-percentage: $-i * math.div(100, $steps);
|
|
122
|
+
$-colors: list.append($-colors, color.mix($color-end, $color-start, $-percentage * 1%));
|
|
208
123
|
}
|
|
209
124
|
|
|
125
|
+
@return $-colors;
|
|
210
126
|
}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
@use 'sass:color';
|
|
2
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../../validators/type-of/is-color' as *;
|
|
4
|
-
@use '../../validators/type-of/is-number' as *;
|
|
5
2
|
|
|
6
3
|
/// Линейная интерполяция (смешивание) между двумя цветами.
|
|
7
4
|
///
|
|
@@ -27,7 +24,7 @@
|
|
|
27
24
|
/// ---
|
|
28
25
|
/// @name color-blend
|
|
29
26
|
/// @group utilities-helpers
|
|
30
|
-
/// @since
|
|
27
|
+
/// @since 0.0.1
|
|
31
28
|
/// @access public
|
|
32
29
|
/// @author Murad Rustamov (therteenten)
|
|
33
30
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -91,93 +88,22 @@
|
|
|
91
88
|
/// $darkened: color-blend($base-color, black, 30); // Затемнение на 30%
|
|
92
89
|
/// @see color-shade
|
|
93
90
|
/// @see color-tint
|
|
94
|
-
/// @param {Color} $
|
|
91
|
+
/// @param {Color} $from - Исходный (начальный) цвет. Может
|
|
95
92
|
/// быть в любом формате, поддерживаемом Sass (HEX, RGB,
|
|
96
93
|
/// HSL и т.д.).
|
|
97
|
-
/// @param {Color} $
|
|
94
|
+
/// @param {Color} $to - Целевой (конечный) цвет. Автоматически
|
|
98
95
|
/// приводится к тому же цветовому пространству, что и
|
|
99
|
-
/// `$
|
|
96
|
+
/// `$from`.
|
|
100
97
|
/// @param {Number} $percentage - Процент смешивания от
|
|
101
|
-
/// `$
|
|
98
|
+
/// `$from` к `$to` (0-100). Значение автоматически
|
|
102
99
|
/// конвертируется в проценты с помощью умножения на 1%.
|
|
103
|
-
///
|
|
104
|
-
///
|
|
105
|
-
///
|
|
100
|
+
/// - 0: возвращает чистый цвет `$from`
|
|
101
|
+
/// - 100: возвращает чистый цвет `$to`
|
|
102
|
+
/// - 50: возвращает ровную смесь `50/50`
|
|
106
103
|
/// @return {Color} - Промежуточный цвет, полученный линейной
|
|
107
|
-
/// интерполяцией между `$
|
|
104
|
+
/// интерполяцией между `$from` и `$to` в указанной пропорции.
|
|
108
105
|
/// Использует цветовое пространство по умолчанию для
|
|
109
106
|
/// смешивания (обычно sRGB).
|
|
110
|
-
@function color-blend($
|
|
111
|
-
|
|
112
|
-
// Проверка типа первого параметра: ожидается начальный цвет.
|
|
113
|
-
// Функция is-color() проверяет, является ли $color-from
|
|
114
|
-
// валидным цветом CSS.
|
|
115
|
-
@if not is-color($color-from) {
|
|
116
|
-
|
|
117
|
-
// Если $color-from не является цветом, возвращаем ошибку через
|
|
118
|
-
// стандартную функцию логирования. Это предотвращает
|
|
119
|
-
// некорректные вычисления с нецветовыми данными.
|
|
120
|
-
@return log-invalid-type(
|
|
121
|
-
'color-blend',
|
|
122
|
-
$color-from,
|
|
123
|
-
'$color-from',
|
|
124
|
-
'color'
|
|
125
|
-
);
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
// Проверка типа второго параметра: ожидается конечный цвет.
|
|
130
|
-
// Проверка выполняется только если $color-from прошел валидацию.
|
|
131
|
-
@else if not is-color($color-to) {
|
|
132
|
-
|
|
133
|
-
// Если $color-to не является цветом, возвращаем ошибку.
|
|
134
|
-
@return log-invalid-type(
|
|
135
|
-
'color-blend',
|
|
136
|
-
$color-to,
|
|
137
|
-
'$color-to',
|
|
138
|
-
'color'
|
|
139
|
-
);
|
|
140
|
-
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
// Проверка типа третьего параметра: ожидается процент смешивания.
|
|
144
|
-
// $percentage определяет, сколько процентов начального цвета
|
|
145
|
-
// будет в итоговой смеси (от 0 до 100).
|
|
146
|
-
@else if not is-number($percentage) {
|
|
147
|
-
|
|
148
|
-
// Если $percentage не является числом, возвращаем ошибку.
|
|
149
|
-
@return log-invalid-type(
|
|
150
|
-
'color-blend',
|
|
151
|
-
$percentage,
|
|
152
|
-
'$percentage',
|
|
153
|
-
'number'
|
|
154
|
-
);
|
|
155
|
-
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
// Все параметры прошли валидацию - выполняем смешивание цветов.
|
|
159
|
-
@else {
|
|
160
|
-
|
|
161
|
-
// Формула смешивания: создаем промежуточный цвет между
|
|
162
|
-
// $color-from и $color-to с указанным процентным соотношением.
|
|
163
|
-
//
|
|
164
|
-
// Используем встроенную функцию color.mix():
|
|
165
|
-
// Параметры:
|
|
166
|
-
// - $color-to: первый цвет для смешивания
|
|
167
|
-
// - $color-from: второй цвет для смешивания
|
|
168
|
-
// - $percentage * 1%: процентное соотношение
|
|
169
|
-
// (сколько процентов $color-from в смеси)
|
|
170
|
-
//
|
|
171
|
-
// Математика смешивания:
|
|
172
|
-
// - При $percentage = 0% → 100% $color-to, 0% $color-from
|
|
173
|
-
// - При $percentage = 50% → 50% $color-to, 50% $color-from
|
|
174
|
-
// - При $percentage = 100% → 0% $color-to, 100% $color-from
|
|
175
|
-
//
|
|
176
|
-
// Ключевая особенность: функция является оберткой над
|
|
177
|
-
// color.mix() с добавлением валидации параметров и
|
|
178
|
-
// преобразованием процентов в правильный формат.
|
|
179
|
-
@return color.mix($color-to, $color-from, $percentage * 1%);
|
|
180
|
-
|
|
181
|
-
}
|
|
182
|
-
|
|
107
|
+
@function color-blend($from, $to, $percentage) {
|
|
108
|
+
@return color.mix($to, $from, $percentage * 1%);
|
|
183
109
|
}
|