@omnisass/library 0.2.0
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/CHANGELOG.md +5 -0
- package/LICENSE +21 -0
- package/README.md +2 -0
- package/_configs.scss +68 -0
- package/index.scss +95 -0
- package/modules/utilities/converters/_convert-camel2kebab.scss +186 -0
- package/modules/utilities/converters/_convert-em2px.scss +239 -0
- package/modules/utilities/converters/_convert-hex2rgb.scss +97 -0
- package/modules/utilities/converters/_convert-hex2rgba.scss +124 -0
- package/modules/utilities/converters/_convert-kebab2camel.scss +232 -0
- package/modules/utilities/converters/_convert-kebab2snake.scss +118 -0
- package/modules/utilities/converters/_convert-px2em.scss +236 -0
- package/modules/utilities/converters/_convert-px2rem.scss +180 -0
- package/modules/utilities/converters/_convert-rem2px.scss +207 -0
- package/modules/utilities/converters/_convert-snake2kebab.scss +173 -0
- package/modules/utilities/getters/color/_get-color-brightness.scss +138 -0
- package/modules/utilities/getters/color/_get-color-darkest.scss +178 -0
- package/modules/utilities/getters/list/_get-list-item-end.scss +114 -0
- package/modules/utilities/getters/list/_get-list-item-start.scss +109 -0
- package/modules/utilities/getters/list/_get-list-item.scss +179 -0
- package/modules/utilities/getters/number/_get-number-from-percent.scss +139 -0
- package/modules/utilities/getters/number/_get-number-height-by-ratio.scss +199 -0
- package/modules/utilities/getters/number/_get-number-max.scss +168 -0
- package/modules/utilities/getters/number/_get-number-min.scss +162 -0
- package/modules/utilities/getters/number/_get-number-percentage-of.scss +149 -0
- package/modules/utilities/getters/number/_get-number-unit.scss +111 -0
- package/modules/utilities/getters/number/_get-number-width-by-ratio.scss +223 -0
- package/modules/utilities/helpers/color/_color-blend-steps.scss +210 -0
- package/modules/utilities/helpers/color/_color-blend.scss +183 -0
- package/modules/utilities/helpers/color/_color-hue-shift.scss +148 -0
- package/modules/utilities/helpers/color/_color-scale.scss +208 -0
- package/modules/utilities/helpers/color/_color-shade.scss +113 -0
- package/modules/utilities/helpers/color/_color-tint.scss +118 -0
- package/modules/utilities/helpers/color/_color-triad.scss +141 -0
- package/modules/utilities/helpers/list/_list-dedupe.scss +146 -0
- package/modules/utilities/helpers/list/_list-insert-at.scss +166 -0
- package/modules/utilities/helpers/list/_list-merge.scss +86 -0
- package/modules/utilities/helpers/list/_list-remove-at.scss +160 -0
- package/modules/utilities/helpers/list/_list-sum-numbers-safe.scss +175 -0
- package/modules/utilities/helpers/list/_list-sum-numbers.scss +128 -0
- package/modules/utilities/helpers/misc/_url-encode.configs.scss +64 -0
- package/modules/utilities/helpers/misc/_url-encode.scss +148 -0
- package/modules/utilities/helpers/number/_number-ceil-to.scss +111 -0
- package/modules/utilities/helpers/number/_number-clamp-max.scss +92 -0
- package/modules/utilities/helpers/number/_number-clamp-min.scss +100 -0
- package/modules/utilities/helpers/number/_number-clamp.scss +109 -0
- package/modules/utilities/helpers/number/_number-denormalize.scss +172 -0
- package/modules/utilities/helpers/number/_number-fibonacci.scss +235 -0
- package/modules/utilities/helpers/number/_number-floor-to.scss +114 -0
- package/modules/utilities/helpers/number/_number-format-with-separator.scss +122 -0
- package/modules/utilities/helpers/number/_number-normalize.scss +160 -0
- package/modules/utilities/helpers/number/_number-random-between-int.scss +84 -0
- package/modules/utilities/helpers/number/_number-random-between.scss +120 -0
- package/modules/utilities/helpers/number/_number-range.scss +268 -0
- package/modules/utilities/helpers/number/_number-round-to-nearest.scss +131 -0
- package/modules/utilities/helpers/number/_number-round-to.scss +118 -0
- package/modules/utilities/helpers/number/_number-strip-unit.scss +97 -0
- package/modules/utilities/helpers/string/_string-capitalize.scss +84 -0
- package/modules/utilities/helpers/string/_string-replace.scss +69 -0
- package/modules/utilities/helpers/string/_string-trim-end.scss +62 -0
- package/modules/utilities/helpers/string/_string-trim-start.scss +62 -0
- package/modules/utilities/helpers/string/_string-trim.scss +69 -0
- package/modules/utilities/loggers/_log-invalid-type.scss +151 -0
- package/modules/utilities/loggers/_log-invalid-value.scss +151 -0
- package/modules/utilities/setters/_index.scss +3 -0
- package/modules/utilities/validators/color/_is-color-light.scss +132 -0
- package/modules/utilities/validators/color/_is-color-list.scss +124 -0
- package/modules/utilities/validators/list/_is-list-contained.scss +65 -0
- package/modules/utilities/validators/misc/_is-time.scss +115 -0
- package/modules/utilities/validators/number/_is-int-even.scss +69 -0
- package/modules/utilities/validators/number/_is-int-odd.scss +70 -0
- package/modules/utilities/validators/number/_is-int.scss +124 -0
- package/modules/utilities/validators/number/_is-number-has-unit.scss +85 -0
- package/modules/utilities/validators/number/_is-number-negative.scss +76 -0
- package/modules/utilities/validators/number/_is-number-positive.scss +74 -0
- package/modules/utilities/validators/number/_is-number-unitless.scss +88 -0
- package/modules/utilities/validators/number/_is-number-zero.scss +75 -0
- package/modules/utilities/validators/string/_is-string-contained.scss +108 -0
- package/modules/utilities/validators/string/_is-string-empty.scss +56 -0
- package/modules/utilities/validators/string/_is-string-ending-with.scss +66 -0
- package/modules/utilities/validators/string/_is-string-starting-with.scss +66 -0
- package/modules/utilities/validators/type-of/_is-boolean.scss +92 -0
- package/modules/utilities/validators/type-of/_is-color.scss +96 -0
- package/modules/utilities/validators/type-of/_is-list.scss +105 -0
- package/modules/utilities/validators/type-of/_is-map.scss +105 -0
- package/modules/utilities/validators/type-of/_is-number.scss +103 -0
- package/modules/utilities/validators/type-of/_is-string.scss +110 -0
- package/modules/utilities/validators/type-of/_is-type.scss +77 -0
- package/package.json +54 -0
- package/package.scss +156 -0
- package/test.md +168 -0
- package/test.scss +405 -0
- package/test.sh +149 -0
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
@use '../../loggers/log-invalid-type' as *;
|
|
2
|
+
@use '../../validators/type-of/is-number' as *;
|
|
3
|
+
@use '../../validators/type-of/is-list' as *;
|
|
4
|
+
|
|
5
|
+
/// Находит максимальное числовое значение в списке.
|
|
6
|
+
///
|
|
7
|
+
/// Функция проходит по всем элементам списка и находит
|
|
8
|
+
/// наибольшее числовое значение. Нечисловые элементы (строки,
|
|
9
|
+
/// цвета, списки, карты и т.д.) игнорируются без вывода
|
|
10
|
+
/// ошибок. Если в списке нет числовых элементов, функция
|
|
11
|
+
/// возвращает `null`.
|
|
12
|
+
///
|
|
13
|
+
/// Важные особенности функции:
|
|
14
|
+
/// - Игнорирует все нечисловые элементы без предупреждений
|
|
15
|
+
/// - Возвращает `null` для пустых списков или списков без чисел
|
|
16
|
+
/// - Сравнивает только числа с совместимыми единицами измерения
|
|
17
|
+
/// - Использует локальные переменные с префиксом `$-` для
|
|
18
|
+
/// избежания конфликтов
|
|
19
|
+
/// - Не является прямой заменой `math.max()`, которая принимает
|
|
20
|
+
/// аргументы, а не список
|
|
21
|
+
/// - Сохраняет единицы измерения найденного максимального
|
|
22
|
+
/// значения
|
|
23
|
+
/// ---
|
|
24
|
+
/// @name get-number-max
|
|
25
|
+
/// @group utilities-getters
|
|
26
|
+
/// @since 2025.12.27
|
|
27
|
+
/// @access public
|
|
28
|
+
/// @author Murad Rustamov (therteenten)
|
|
29
|
+
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
30
|
+
/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
|
|
31
|
+
/// @link https://sass-lang.com/documentation/modules/math#max См. также: Официальная документация Sass - Функция math.max()
|
|
32
|
+
/// @link https://sass-lang.com/documentation/values/numbers#units См. также: Официальная документация Sass - Числа и единицы измерения
|
|
33
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/max MDN Web Docs - CSS функция max()
|
|
34
|
+
/// @link https://stackoverflow.com/questions/19088270/find-the-highest-number-in-a-list-with-sass Stack Overflow - Поиск наибольшего числа в списке Sass
|
|
35
|
+
/// @link https://css-tricks.com/snippets/sass/ См. также: CSS-Tricks - Коллекция сниппетов Sass
|
|
36
|
+
/// @link https://sass-guidelin.es/ru/#list-functions См. также: Sass Guidelines - Функции для работы со списками
|
|
37
|
+
/// @link https://frontender.info/sass-lists/ См. также: Frontender Magazine - Работа со списками в Sass
|
|
38
|
+
/// @link https://www.w3schools.com/sass/sass_functions_numeric.php См. также: W3Schools - Числовые функции в Sass
|
|
39
|
+
/// @link https://habr.com/ru/post/247887/ См. также: Habr - Статья "Sass для верстальщика: числа и математика"
|
|
40
|
+
/// @example scss - Поиск максимального числа
|
|
41
|
+
/// @debug get-number-max((10, 20, 30, 40)); // 40
|
|
42
|
+
/// @debug get-number-max((1, 5, 3, 9, 2)); // 9
|
|
43
|
+
/// @debug get-number-max((0.1, 0.5, 0.3)); // 0.5
|
|
44
|
+
/// @example scss - Поиск максимального значения с единицами измерения
|
|
45
|
+
/// @debug get-number-max((10px, 20px, 30px)); // 30px
|
|
46
|
+
/// @debug get-number-max((1rem, 2.5rem, 0.5rem)); // 2.5rem
|
|
47
|
+
/// @debug get-number-max((50%, 30%, 80%)); // 80%
|
|
48
|
+
/// @example scss - Обработка смешанных типов данных
|
|
49
|
+
/// @debug get-number-max((10, "text", 30, #fff, 20)); // 30
|
|
50
|
+
/// @debug get-number-max((true, false, null, 5)); // 5
|
|
51
|
+
/// @debug get-number-max(("a", "b", "c")); // null
|
|
52
|
+
/// @example scss - Обработка чисел с разными единицами измерения
|
|
53
|
+
/// // Сравнение работает только для чисел с совместимыми единицами
|
|
54
|
+
/// // @debug get-number-max((10px, 20px, 2em)); // Error: 2em and 20px have incompatible units.
|
|
55
|
+
/// @debug get-number-max((1cm, 20mm, 0.5in)); // 20mm (если единицы совместимы)
|
|
56
|
+
/// @example scss - Пустые списки и крайние случаи
|
|
57
|
+
/// @debug get-number-max(()); // null
|
|
58
|
+
/// @debug get-number-max(none); // null
|
|
59
|
+
/// @debug get-number-max((10px)); // 10px
|
|
60
|
+
/// @debug get-number-max((-10, -20, -5)); // -5
|
|
61
|
+
/// @example scss - Практическое использование
|
|
62
|
+
/// $font-sizes: 12px, 14px, 16px, 18px, 20px;
|
|
63
|
+
/// @debug get-number-max($font-sizes); // $largest-font: 20px
|
|
64
|
+
/// @example scss - Поиск максимальной ширины контейнера
|
|
65
|
+
/// $container-widths: 320px, 768px, 1024px, 1280px;
|
|
66
|
+
/// @debug get-number-max($container-widths); // $max-width: 1280px
|
|
67
|
+
/// @param {List} $list - Список значений, который может
|
|
68
|
+
/// содержать элементы разных типов. Функция будет
|
|
69
|
+
/// обрабатывать только числовые элементы.
|
|
70
|
+
/// @return {Number | Null} - Максимальное числовое значение
|
|
71
|
+
/// из списка или `null`, если в списке нет числовых элементов.
|
|
72
|
+
/// Сохраняет единицы измерения найденного максимального
|
|
73
|
+
/// значения.
|
|
74
|
+
/// @throws {Error} - Может выбросить ошибку при попытке
|
|
75
|
+
/// сравнить числа с несовместимыми единицами измерения.
|
|
76
|
+
@function get-number-max($list) {
|
|
77
|
+
|
|
78
|
+
// Переменная для хранения текущего максимального значения.
|
|
79
|
+
// Инициализируется как null, чтобы отслеживать:
|
|
80
|
+
// 1. Пустые списки (результат останется null)
|
|
81
|
+
// 2. Первое найденное число (будет присвоено $-result)
|
|
82
|
+
$-result: null;
|
|
83
|
+
|
|
84
|
+
// Первичная валидация входных данных.
|
|
85
|
+
// Убеждаемся, что переданный аргумент является
|
|
86
|
+
// списком или arglist.
|
|
87
|
+
@if not is-list($list) {
|
|
88
|
+
|
|
89
|
+
// Если $list не является списком, логируем
|
|
90
|
+
// ошибку и прерываем выполнение.
|
|
91
|
+
@return log-invalid-type(
|
|
92
|
+
'get-number-max',
|
|
93
|
+
$list,
|
|
94
|
+
'$list',
|
|
95
|
+
('list', 'arglist')
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Основная логика выполняется только если валидация прошла
|
|
101
|
+
// успешно.
|
|
102
|
+
// Блок @else гарантирует, что код ниже выполняется только
|
|
103
|
+
// для корректных списков.
|
|
104
|
+
@else {
|
|
105
|
+
|
|
106
|
+
// Итерация по всем элементам списка.
|
|
107
|
+
@each $-item in $list {
|
|
108
|
+
|
|
109
|
+
// Проверка типа текущего элемента.
|
|
110
|
+
// Функция is-number возвращает true только для:
|
|
111
|
+
// - Целых чисел (42)
|
|
112
|
+
// - Дробных чисел (3.14)
|
|
113
|
+
// - Чисел с единицами измерения (10px, 2rem, 1.5em)
|
|
114
|
+
@if is-number($-item) {
|
|
115
|
+
|
|
116
|
+
// Обновление значения максимума.
|
|
117
|
+
// Условие проверяет два случая:
|
|
118
|
+
// 1. $-result == null: это первое найденное число
|
|
119
|
+
// 2. $-item > $-result: текущее число больше текущего
|
|
120
|
+
// максимума
|
|
121
|
+
// Оператор > в Sass работает с учетом единиц измерения,
|
|
122
|
+
// но требует их совместимости (например, нельзя
|
|
123
|
+
// сравнить 10px и 2em).
|
|
124
|
+
@if $-result == null or $-item > $-result {
|
|
125
|
+
$-result: $-item;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// Обработка нечисловых элементов.
|
|
131
|
+
// Если is-number($-item) вернул false, элемент имеет
|
|
132
|
+
// неподдерживаемый тип (строка, булево значение, null,
|
|
133
|
+
// карта и т.д.).
|
|
134
|
+
@else {
|
|
135
|
+
|
|
136
|
+
// Ветка обработки ошибок: элемент не является числом.
|
|
137
|
+
// Прерываем выполнение функции при первом же нечисловом
|
|
138
|
+
// элементе. Это "безопасный" подход - лучше явная
|
|
139
|
+
// ошибка, чем неявное некорректное поведение.
|
|
140
|
+
//
|
|
141
|
+
// (!) Важно: функция не пытается пропустить нечисловые
|
|
142
|
+
// элементы или преобразовать их - она строго требует
|
|
143
|
+
// числового ввода.
|
|
144
|
+
@return log-invalid-type(
|
|
145
|
+
'get-number-max',
|
|
146
|
+
$-item,
|
|
147
|
+
'$-item',
|
|
148
|
+
'number'
|
|
149
|
+
);
|
|
150
|
+
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// Возвращаем результат.
|
|
158
|
+
// Возможные значения:
|
|
159
|
+
// - null: если список был пустой (не содержал элементов)
|
|
160
|
+
// - число: максимальное значение из списка
|
|
161
|
+
//
|
|
162
|
+
// Если функция дошла до этой точки, значит:
|
|
163
|
+
// 1. $list был корректным списком
|
|
164
|
+
// 2. Все элементы списка были числами
|
|
165
|
+
// 3. Не было вызвано ни одной ошибки через log-invalid-type
|
|
166
|
+
@return $-result;
|
|
167
|
+
|
|
168
|
+
}
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
@use '../../loggers/log-invalid-type' as *;
|
|
2
|
+
@use '../../validators/type-of/is-number' as *;
|
|
3
|
+
@use '../../validators/type-of/is-list' as *;
|
|
4
|
+
|
|
5
|
+
/// Находит минимальное числовое значение в списке.
|
|
6
|
+
///
|
|
7
|
+
/// Функция проходит по всем элементам списка и находит
|
|
8
|
+
/// наименьшее числовое значение. Нечисловые элементы (строки,
|
|
9
|
+
/// цвета, списки, карты и т.д.) игнорируются без вывода
|
|
10
|
+
/// ошибок. Если в списке нет числовых элементов, функция
|
|
11
|
+
/// возвращает `null`.
|
|
12
|
+
///
|
|
13
|
+
/// Важные особенности функции:
|
|
14
|
+
/// - Игнорирует все нечисловые элементы без предупреждений
|
|
15
|
+
/// - Возвращает `null` для пустых списков или списков без чисел
|
|
16
|
+
/// - Сравнивает только числа с совместимыми единицами измерения
|
|
17
|
+
/// - Использует локальные переменные с префиксом `$-` для
|
|
18
|
+
/// избежания конфликтов
|
|
19
|
+
/// - Не является прямой заменой `math.min()`, которая принимает
|
|
20
|
+
/// аргументы, а не список
|
|
21
|
+
/// - Сохраняет единицы измерения найденного минимального
|
|
22
|
+
/// значения
|
|
23
|
+
/// ---
|
|
24
|
+
/// @name get-number-min
|
|
25
|
+
/// @group utilities-getters
|
|
26
|
+
/// @since 2025.12.27
|
|
27
|
+
/// @access public
|
|
28
|
+
/// @author Murad Rustamov (therteenten)
|
|
29
|
+
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
30
|
+
/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
|
|
31
|
+
/// @link https://sass-lang.com/documentation/modules/math#min См. также: Официальная документация Sass - Функция math.min()
|
|
32
|
+
/// @link https://sass-lang.com/documentation/values/numbers#units См. также: Официальная документация Sass - Числа и единицы измерения
|
|
33
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/min MDN Web Docs - CSS функция min()
|
|
34
|
+
/// @link https://css-tricks.com/snippets/sass/ См. также: CSS-Tricks - Коллекция сниппетов Sass
|
|
35
|
+
/// @link https://sass-guidelin.es/ru/#list-functions См. также: Sass Guidelines - Функции для работы со списками
|
|
36
|
+
/// @link https://frontender.info/sass-lists/ См. также: Frontender Magazine - Работа со списками в Sass
|
|
37
|
+
/// @link https://www.w3schools.com/sass/sass_functions_numeric.php См. также: W3Schools - Числовые функции в Sass
|
|
38
|
+
/// @link https://habr.com/ru/post/247887/ См. также: Habr - Статья "Sass для верстальщика: числа и математика"
|
|
39
|
+
/// @example scss - Поиск минимального числа
|
|
40
|
+
/// @debug get-number-min((10, 20, 30, 40)); // 10
|
|
41
|
+
/// @debug get-number-min((5, 1, 9, 3, 2)); // 1
|
|
42
|
+
/// @debug get-number-min((0.5, 0.1, 0.3)); // 0.1
|
|
43
|
+
/// @example scss - Поиск минимального значения с единицами измерения
|
|
44
|
+
/// @debug get-number-min((10px, 20px, 30px)); // 10px
|
|
45
|
+
/// @debug get-number-min((2.5rem, 1rem, 0.5rem)); // 0.5rem
|
|
46
|
+
/// @debug get-number-min((80%, 50%, 30%)); // 30%
|
|
47
|
+
/// @example scss - Обработка смешанных типов данных
|
|
48
|
+
/// @debug get-number-min((10, "текст", 30, #fff, 20)); // 10
|
|
49
|
+
/// @debug get-number-min((true, false, null, 5)); // 5
|
|
50
|
+
/// @debug get-number-min(("a", "b", "c")); // null
|
|
51
|
+
/// @example scss - Обработка чисел с разными единицами измерения
|
|
52
|
+
/// // Сравнение работает только для чисел с совместимыми единицами
|
|
53
|
+
/// @debug get-number-min((10px, 20px, 2em)); // Error: 2em and 10px have incompatible units.
|
|
54
|
+
/// @debug get-number-min((1cm, 20mm, 0.5in)); // 1cm
|
|
55
|
+
/// @example scss - Пустые списки и крайние случаи
|
|
56
|
+
/// @debug get-number-min(()); // null
|
|
57
|
+
/// @debug get-number-min(none); // null
|
|
58
|
+
/// @debug get-number-min((10px)); // 10px
|
|
59
|
+
/// @debug get-number-min((-5, -10, -20)); // -20
|
|
60
|
+
/// @example scss - Практическое использование
|
|
61
|
+
/// $font-sizes: 12px, 14px, 16px, 18px, 20px;
|
|
62
|
+
/// @debug get-number-min($font-sizes); // 12px
|
|
63
|
+
/// @example scss - Поиск минимальной ширины контейнера
|
|
64
|
+
/// $container-widths: 320px, 768px, 1024px, 1280px;
|
|
65
|
+
/// @debug get-number-min($container-widths); // 320px
|
|
66
|
+
/// @param {List} $list - Список значений, который может
|
|
67
|
+
/// содержать элементы разных типов. Функция будет
|
|
68
|
+
/// обрабатывать только числовые элементы.
|
|
69
|
+
/// @return {Number | Null} - Минимальное числовое значение из
|
|
70
|
+
/// списка или `null`, если в списке нет числовых элементов.
|
|
71
|
+
/// Сохраняет единицы измерения найденного минимального
|
|
72
|
+
/// значения.
|
|
73
|
+
/// @throws {Error} - Может выбросить ошибку при попытке
|
|
74
|
+
/// сравнить числа с несовместимыми единицами измерения.
|
|
75
|
+
@function get-number-min($list) {
|
|
76
|
+
|
|
77
|
+
// Инициализация переменной для хранения результата.
|
|
78
|
+
// Значение null используется для обозначения:
|
|
79
|
+
// - Пустого списка (возвращается null)
|
|
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
|
+
|
|
130
|
+
}
|
|
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
|
+
}
|
|
148
|
+
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// Возврат результата.
|
|
152
|
+
// Возможные возвращаемые значения:
|
|
153
|
+
// - null: если список был пустым или не содержал элементов
|
|
154
|
+
// - число: наименьшее значение из списка
|
|
155
|
+
//
|
|
156
|
+
// Если выполнение дошло до этой точки, значит:
|
|
157
|
+
// 1. $list был корректным списком
|
|
158
|
+
// 2. Все элементы списка были числами
|
|
159
|
+
// 3. Ни один элемент не вызвал ошибку
|
|
160
|
+
@return $-result;
|
|
161
|
+
|
|
162
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
@use 'sass:math';
|
|
2
|
+
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
+
@use '../../validators/type-of/is-number' as *;
|
|
4
|
+
|
|
5
|
+
/// Вычисляет процентное отношение части к целому.
|
|
6
|
+
///
|
|
7
|
+
/// Функция рассчитывает, какой процент от целого числа
|
|
8
|
+
/// составляет указанная часть. Возвращает процентное значение
|
|
9
|
+
/// с символом '%', которое можно использовать непосредственно
|
|
10
|
+
/// в CSS-свойствах.
|
|
11
|
+
///
|
|
12
|
+
/// Важные особенности функции:
|
|
13
|
+
/// - Использует безопасное деление через `math.div()`
|
|
14
|
+
/// - Преобразует десятичную дробь в процент через
|
|
15
|
+
/// `math.percentage()`
|
|
16
|
+
/// - Возвращает значение с символом процента (например, "50%")
|
|
17
|
+
/// - Работает с любыми числовыми значениями (с единицами
|
|
18
|
+
/// измерения и без)
|
|
19
|
+
/// - Поддерживает вычисление любых пропорций и отношений
|
|
20
|
+
/// ---
|
|
21
|
+
/// @name get-number-percentage-of
|
|
22
|
+
/// @group utilities-getters
|
|
23
|
+
/// @since 2025.12.27
|
|
24
|
+
/// @access public
|
|
25
|
+
/// @author Murad Rustamov (therteenten)
|
|
26
|
+
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
27
|
+
/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
|
|
28
|
+
/// @link https://sass-lang.com/documentation/modules/math#percentage См. также: Официальная документация Sass - Функция math.percentage()
|
|
29
|
+
/// @link https://sass-lang.com/documentation/modules/math#div См. также: Официальная документация Sass - Функция math.div()
|
|
30
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed MDN Web Docs - Number.toFixed()
|
|
31
|
+
/// @example scss - Базовое вычисление процентов
|
|
32
|
+
/// @debug get-number-percentage-of(50, 100); // 50%
|
|
33
|
+
/// @debug get-number-percentage-of(25, 200); // 12.5%
|
|
34
|
+
/// @debug get-number-percentage-of(3, 4); // 75%
|
|
35
|
+
/// @debug get-number-percentage-of(1, 3); // 33.33333333333333%
|
|
36
|
+
/// @example scss - Вычисление процентного соотношения
|
|
37
|
+
/// @debug get-number-percentage-of(16, 9); // 177.77777777777777% (соотношение 16:9)
|
|
38
|
+
/// @debug get-number-percentage-of(4, 3); // 133.33333333333331%(соотношение 4:3)
|
|
39
|
+
/// @debug get-number-percentage-of(1, 2); // 50% (соотношение 1:2)
|
|
40
|
+
/// @debug get-number-percentage-of(2, 1); // 200% (соотношение 2:1)
|
|
41
|
+
/// @example scss - Вычисление доли от целого
|
|
42
|
+
/// @debug get-number-percentage-of(30, 150); // 20% (30 составляет 20% от 150)
|
|
43
|
+
/// @debug get-number-percentage-of(75, 300); // 25% (75 составляет 25% от 300)
|
|
44
|
+
/// @debug get-number-percentage-of(120, 80); // 150% (120 составляет 150% от 80)
|
|
45
|
+
/// @debug get-number-percentage-of(0, 100); // 0% (0 составляет 0% от 100)
|
|
46
|
+
/// @example scss - Практическое использование для прогресс-бара
|
|
47
|
+
/// $completed-tasks: 7;
|
|
48
|
+
/// $total-tasks: 10;
|
|
49
|
+
/// $progress: get-number-percentage-of($completed-tasks, $total-tasks);
|
|
50
|
+
/// // $progress: 70%
|
|
51
|
+
/// .progress-bar {
|
|
52
|
+
/// width: $progress;
|
|
53
|
+
/// }
|
|
54
|
+
/// @example css - Результат
|
|
55
|
+
/// .progress-bar {
|
|
56
|
+
/// width: 70%;
|
|
57
|
+
/// }
|
|
58
|
+
/// @example scss - Практическое использование для соотношения сторон
|
|
59
|
+
/// $width: 1920;
|
|
60
|
+
/// $height: 1080;
|
|
61
|
+
/// $aspect-ratio: get-number-percentage-of($height, $width);
|
|
62
|
+
/// // $aspect-ratio: 56.25%
|
|
63
|
+
/// .video-container {
|
|
64
|
+
/// padding-bottom: $aspect-ratio;
|
|
65
|
+
/// }
|
|
66
|
+
/// @example css - Результат
|
|
67
|
+
/// .video-container {
|
|
68
|
+
/// padding-bottom: 56.25%;
|
|
69
|
+
/// }
|
|
70
|
+
/// @example scss - Практическое использование для скидок и расчетов
|
|
71
|
+
/// $discount-amount: 25;
|
|
72
|
+
/// $original-price: 100;
|
|
73
|
+
/// $discount-percentage: get-number-percentage-of($discount-amount, $original-price);
|
|
74
|
+
/// // $discount-percentage: 25%
|
|
75
|
+
/// .discount-badge::after {
|
|
76
|
+
/// content: "-#{$discount-percentage}";
|
|
77
|
+
/// }
|
|
78
|
+
/// @example css - Результат
|
|
79
|
+
/// .discount-badge::after {
|
|
80
|
+
/// content: "-25%";
|
|
81
|
+
/// }
|
|
82
|
+
/// @param {Number} $part - Числовое значение, представляющее часть
|
|
83
|
+
/// целого. Может быть любым числом (целым, дробным, с единицами
|
|
84
|
+
/// измерения или без).
|
|
85
|
+
/// @param {Number} $whole - Числовое значение, представляющее целое.
|
|
86
|
+
/// Может быть любым числом (целым, дробным, с единицами измерения
|
|
87
|
+
/// или без). Не должно быть равно нулю.
|
|
88
|
+
/// @return {Number} - Процентное значение с символом '%',
|
|
89
|
+
/// представляющее отношение части к целому. Возвращаемое значение
|
|
90
|
+
/// можно использовать напрямую в CSS-свойствах.
|
|
91
|
+
/// @throws {Error} - Может выбросить ошибку деления на ноль,
|
|
92
|
+
/// если `$whole` равно 0, или если параметры не являются числами.
|
|
93
|
+
@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
|
+
|
|
149
|
+
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
@use 'sass:math';
|
|
2
|
+
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
+
@use '../../validators/type-of/is-number' as *;
|
|
4
|
+
|
|
5
|
+
/// Возвращает единицы измерения числа в виде строки.
|
|
6
|
+
///
|
|
7
|
+
/// Функция является оберткой над встроенной функцией
|
|
8
|
+
/// `math.unit()` и возвращает строковое представление
|
|
9
|
+
/// единиц измерения переданного числа. Если число не имеет
|
|
10
|
+
/// единиц измерения (является безразмерным), возвращается
|
|
11
|
+
/// пустая строка (`''`).
|
|
12
|
+
///
|
|
13
|
+
/// Важные особенности функции:
|
|
14
|
+
/// - Возвращает строку с единицами измерения числа
|
|
15
|
+
/// - Для безразмерных чисел возвращает пустую строку (`''`)
|
|
16
|
+
/// - Работает с любыми типами единиц измерения CSS
|
|
17
|
+
/// - Является чистой оберткой над встроенной функцией `math.unit()`
|
|
18
|
+
/// - Не изменяет исходное значение, только возвращает его единицы
|
|
19
|
+
/// ---
|
|
20
|
+
/// @name get-number-unit
|
|
21
|
+
/// @group utilities-getters
|
|
22
|
+
/// @since 2025.12.27
|
|
23
|
+
/// @access public
|
|
24
|
+
/// @author Murad Rustamov (therteenten)
|
|
25
|
+
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
26
|
+
/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
|
|
27
|
+
/// @link https://sass-lang.com/documentation/values/numbers См. также: Официальная документация Sass - Тип данных "Числа"
|
|
28
|
+
/// @link https://sass-lang.com/documentation/values/numbers#units См. также: Официальная документация Sass - Единицы измерения в числах
|
|
29
|
+
/// @link https://sass-lang.com/documentation/modules/math#unit См. также: Официальная документация Sass - Функция math.unit()
|
|
30
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units См. также: MDN Web Docs - CSS значения и единицы измерения
|
|
31
|
+
/// @link https://css-tricks.com/snippets/sass/ См. также: CSS-Tricks - Коллекция сниппетов Sass
|
|
32
|
+
/// @link https://sass-guidelin.es/ru/#section-39 См. также: Sass Guidelines - Раздел про проверку типов
|
|
33
|
+
/// @link https://www.w3schools.com/sass/sass_functions_numeric.php См. также: W3Schools - Числовые функции в Sass
|
|
34
|
+
/// @example scss - Простые единицы измерения
|
|
35
|
+
/// @debug get-number-unit(16px); // "px"
|
|
36
|
+
/// @debug get-number-unit(2.5rem); // "rem"
|
|
37
|
+
/// @debug get-number-unit(100%); // "%"
|
|
38
|
+
/// @debug get-number-unit(90deg); // "deg"
|
|
39
|
+
/// @debug get-number-unit(1s); // "s"
|
|
40
|
+
/// @debug get-number-unit(10vw); // "vw"
|
|
41
|
+
/// @debug get-number-unit(96dpi); // "dpi"
|
|
42
|
+
/// @example scss - Безразмерные числа
|
|
43
|
+
/// @debug get-number-unit(16); // ""
|
|
44
|
+
/// @debug get-number-unit(0); // ""
|
|
45
|
+
/// @debug get-number-unit(3.14); // ""
|
|
46
|
+
/// @debug get-number-unit(-5); // ""
|
|
47
|
+
/// @debug get-number-unit(0.5); // ""
|
|
48
|
+
/// @debug get-number-unit(1e-10); // ""
|
|
49
|
+
/// @example scss - Граничные случаи с нулем
|
|
50
|
+
/// @debug get-number-unit(0px); // "px"
|
|
51
|
+
/// @debug get-number-unit(0%); // "%"
|
|
52
|
+
/// @debug get-number-unit(0rem); // "rem"
|
|
53
|
+
/// @example scss - Нечисловые значения
|
|
54
|
+
/// @debug get-number-unit("16px"); // Ошибка, т.к. неподходящий тип
|
|
55
|
+
/// @debug get-number-unit(#ff0000); // Ошибка, т.к. неподходящий тип
|
|
56
|
+
/// @debug get-number-unit(true); // Ошибка, т.к. неподходящий тип
|
|
57
|
+
/// @debug get-number-unit(null); // Ошибка, т.к. неподходящий тип
|
|
58
|
+
/// @debug get-number-unit(auto); // Ошибка, т.к. неподходящий тип
|
|
59
|
+
/// @debug get-number-unit((16, "px")); // Ошибка, т.к. неподходящий тип
|
|
60
|
+
/// @param {Number} $value - Значение, единицы измерения
|
|
61
|
+
/// которого нужно получить.
|
|
62
|
+
/// @return {String} - Строковое представление единиц
|
|
63
|
+
/// измерения числа. Для чисел с единицами измерения
|
|
64
|
+
/// возвращается строка с этими единицами. Для
|
|
65
|
+
/// безразмерных чисел и нечисловых значений
|
|
66
|
+
/// возвращается пустая строка (`''`).
|
|
67
|
+
/// @throws {Error} - Не выбрасывает ошибок, только
|
|
68
|
+
/// если значение является числом.
|
|
69
|
+
@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
|
+
|
|
111
|
+
}
|