@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.
Files changed (93) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/LICENSE +21 -0
  3. package/README.md +2 -0
  4. package/_configs.scss +68 -0
  5. package/index.scss +95 -0
  6. package/modules/utilities/converters/_convert-camel2kebab.scss +186 -0
  7. package/modules/utilities/converters/_convert-em2px.scss +239 -0
  8. package/modules/utilities/converters/_convert-hex2rgb.scss +97 -0
  9. package/modules/utilities/converters/_convert-hex2rgba.scss +124 -0
  10. package/modules/utilities/converters/_convert-kebab2camel.scss +232 -0
  11. package/modules/utilities/converters/_convert-kebab2snake.scss +118 -0
  12. package/modules/utilities/converters/_convert-px2em.scss +236 -0
  13. package/modules/utilities/converters/_convert-px2rem.scss +180 -0
  14. package/modules/utilities/converters/_convert-rem2px.scss +207 -0
  15. package/modules/utilities/converters/_convert-snake2kebab.scss +173 -0
  16. package/modules/utilities/getters/color/_get-color-brightness.scss +138 -0
  17. package/modules/utilities/getters/color/_get-color-darkest.scss +178 -0
  18. package/modules/utilities/getters/list/_get-list-item-end.scss +114 -0
  19. package/modules/utilities/getters/list/_get-list-item-start.scss +109 -0
  20. package/modules/utilities/getters/list/_get-list-item.scss +179 -0
  21. package/modules/utilities/getters/number/_get-number-from-percent.scss +139 -0
  22. package/modules/utilities/getters/number/_get-number-height-by-ratio.scss +199 -0
  23. package/modules/utilities/getters/number/_get-number-max.scss +168 -0
  24. package/modules/utilities/getters/number/_get-number-min.scss +162 -0
  25. package/modules/utilities/getters/number/_get-number-percentage-of.scss +149 -0
  26. package/modules/utilities/getters/number/_get-number-unit.scss +111 -0
  27. package/modules/utilities/getters/number/_get-number-width-by-ratio.scss +223 -0
  28. package/modules/utilities/helpers/color/_color-blend-steps.scss +210 -0
  29. package/modules/utilities/helpers/color/_color-blend.scss +183 -0
  30. package/modules/utilities/helpers/color/_color-hue-shift.scss +148 -0
  31. package/modules/utilities/helpers/color/_color-scale.scss +208 -0
  32. package/modules/utilities/helpers/color/_color-shade.scss +113 -0
  33. package/modules/utilities/helpers/color/_color-tint.scss +118 -0
  34. package/modules/utilities/helpers/color/_color-triad.scss +141 -0
  35. package/modules/utilities/helpers/list/_list-dedupe.scss +146 -0
  36. package/modules/utilities/helpers/list/_list-insert-at.scss +166 -0
  37. package/modules/utilities/helpers/list/_list-merge.scss +86 -0
  38. package/modules/utilities/helpers/list/_list-remove-at.scss +160 -0
  39. package/modules/utilities/helpers/list/_list-sum-numbers-safe.scss +175 -0
  40. package/modules/utilities/helpers/list/_list-sum-numbers.scss +128 -0
  41. package/modules/utilities/helpers/misc/_url-encode.configs.scss +64 -0
  42. package/modules/utilities/helpers/misc/_url-encode.scss +148 -0
  43. package/modules/utilities/helpers/number/_number-ceil-to.scss +111 -0
  44. package/modules/utilities/helpers/number/_number-clamp-max.scss +92 -0
  45. package/modules/utilities/helpers/number/_number-clamp-min.scss +100 -0
  46. package/modules/utilities/helpers/number/_number-clamp.scss +109 -0
  47. package/modules/utilities/helpers/number/_number-denormalize.scss +172 -0
  48. package/modules/utilities/helpers/number/_number-fibonacci.scss +235 -0
  49. package/modules/utilities/helpers/number/_number-floor-to.scss +114 -0
  50. package/modules/utilities/helpers/number/_number-format-with-separator.scss +122 -0
  51. package/modules/utilities/helpers/number/_number-normalize.scss +160 -0
  52. package/modules/utilities/helpers/number/_number-random-between-int.scss +84 -0
  53. package/modules/utilities/helpers/number/_number-random-between.scss +120 -0
  54. package/modules/utilities/helpers/number/_number-range.scss +268 -0
  55. package/modules/utilities/helpers/number/_number-round-to-nearest.scss +131 -0
  56. package/modules/utilities/helpers/number/_number-round-to.scss +118 -0
  57. package/modules/utilities/helpers/number/_number-strip-unit.scss +97 -0
  58. package/modules/utilities/helpers/string/_string-capitalize.scss +84 -0
  59. package/modules/utilities/helpers/string/_string-replace.scss +69 -0
  60. package/modules/utilities/helpers/string/_string-trim-end.scss +62 -0
  61. package/modules/utilities/helpers/string/_string-trim-start.scss +62 -0
  62. package/modules/utilities/helpers/string/_string-trim.scss +69 -0
  63. package/modules/utilities/loggers/_log-invalid-type.scss +151 -0
  64. package/modules/utilities/loggers/_log-invalid-value.scss +151 -0
  65. package/modules/utilities/setters/_index.scss +3 -0
  66. package/modules/utilities/validators/color/_is-color-light.scss +132 -0
  67. package/modules/utilities/validators/color/_is-color-list.scss +124 -0
  68. package/modules/utilities/validators/list/_is-list-contained.scss +65 -0
  69. package/modules/utilities/validators/misc/_is-time.scss +115 -0
  70. package/modules/utilities/validators/number/_is-int-even.scss +69 -0
  71. package/modules/utilities/validators/number/_is-int-odd.scss +70 -0
  72. package/modules/utilities/validators/number/_is-int.scss +124 -0
  73. package/modules/utilities/validators/number/_is-number-has-unit.scss +85 -0
  74. package/modules/utilities/validators/number/_is-number-negative.scss +76 -0
  75. package/modules/utilities/validators/number/_is-number-positive.scss +74 -0
  76. package/modules/utilities/validators/number/_is-number-unitless.scss +88 -0
  77. package/modules/utilities/validators/number/_is-number-zero.scss +75 -0
  78. package/modules/utilities/validators/string/_is-string-contained.scss +108 -0
  79. package/modules/utilities/validators/string/_is-string-empty.scss +56 -0
  80. package/modules/utilities/validators/string/_is-string-ending-with.scss +66 -0
  81. package/modules/utilities/validators/string/_is-string-starting-with.scss +66 -0
  82. package/modules/utilities/validators/type-of/_is-boolean.scss +92 -0
  83. package/modules/utilities/validators/type-of/_is-color.scss +96 -0
  84. package/modules/utilities/validators/type-of/_is-list.scss +105 -0
  85. package/modules/utilities/validators/type-of/_is-map.scss +105 -0
  86. package/modules/utilities/validators/type-of/_is-number.scss +103 -0
  87. package/modules/utilities/validators/type-of/_is-string.scss +110 -0
  88. package/modules/utilities/validators/type-of/_is-type.scss +77 -0
  89. package/package.json +54 -0
  90. package/package.scss +156 -0
  91. package/test.md +168 -0
  92. package/test.scss +405 -0
  93. 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
+ }