@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,148 @@
1
+ @forward 'url-encode.configs';
2
+
3
+ @use 'url-encode.configs' as configs;
4
+ @use '../string/string-replace' as *;
5
+ @use '../../loggers/log-invalid-type' as *;
6
+ @use '../../validators/type-of/is-map' as *;
7
+ @use '../../validators/type-of/is-string' as *;
8
+
9
+ /// Кодирует строку для безопасного использования в URL.
10
+ ///
11
+ /// Функция заменяет зарезервированные и небезопасные символы в
12
+ /// строке на их процентное представление в соответствии с
13
+ /// RFC 3986. Это позволяет безопасно включать пользовательские
14
+ /// данные, параметры и динамические значения в URL-адреса без
15
+ /// риска нарушения структуры URL или возникновения ошибок.
16
+ ///
17
+ /// Важные особенности функции:
18
+ /// - Заменяет зарезервированные символы URL на процентное кодирование
19
+ /// - Использует настраиваемую карту замены символов
20
+ /// - Поддерживает кастомные наборы символов для кодирования
21
+ /// - Обрабатывает строки любой длины и сложности
22
+ /// - Сохраняет безопасные символы без изменений
23
+ /// - Полезно для динамической генерации URL с параметрами
24
+ /// - Используется для создания безопасных ссылок и маршрутов
25
+ /// - Обеспечивает корректную работу с международными символами
26
+ /// - Предотвращает инъекции и нарушения структуры URL
27
+ /// - Совместима со стандартами кодирования URL
28
+ /// ---
29
+ /// @name url-encode
30
+ /// @group utilities-helpers
31
+ /// @since 2026.01.13
32
+ /// @access public
33
+ /// @author Sindre Sorhus
34
+ /// @author Murad Rustamov (therteenten) [адаптация]
35
+ /// @link https://github.com/sindresorhus GitHub - Sindre Sorhus
36
+ /// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
37
+ /// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
38
+ /// @link https://sass-lang.com/documentation/modules/string См. также: Официальная документация Sass - Модуль String
39
+ /// @link https://sass-lang.com/documentation/values/strings См. также: Официальная документация Sass - Тип данных "Строки"
40
+ /// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent См. также: MDN Web Docs - Функция encodeURIComponent()
41
+ /// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI См. также: MDN Web Docs - Функция encodeURI()
42
+ /// @link https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding См. также: MDN Web Docs - Глоссарий: Percent-encoding
43
+ /// @link https://developer.mozilla.org/en-US/docs/Web/API/URL_API См. также: MDN Web Docs - URL API
44
+ /// @link https://datatracker.ietf.org/doc/html/rfc3986 См. также: RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
45
+ /// @link https://en.wikipedia.org/wiki/Percent-encoding См. также: Wikipedia - Percent-encoding
46
+ /// @link https://css-tricks.com/snippets/sass/string-replace-function/ См. также: CSS-Tricks - Функция замены строк в Sass
47
+ /// @link https://css-tricks.com/snippets/jquery/get-query-params-object-from-url/ См. также: CSS-Tricks - Получение параметров запроса из URL
48
+ /// @link https://sass-guidelin.es/ru/#section-42 См. также: Sass Guidelines - Раздел про строки
49
+ /// @link https://www.urlencoder.io/learn/ См. также: URL Encoder - Обучение кодированию URL
50
+ /// @example scss - Базовое кодирование строк
51
+ /// @debug url-encode('Hello World!'); // 'Hello%20World%21'
52
+ /// @debug url-encode('query=test&sort=asc'); // 'query%3Dtest%26sort%3Dasc'
53
+ /// @debug url-encode('price=$100'); // 'price%3D%24100'
54
+ /// @debug url-encode('user@example.com'); // 'user%40example.com'
55
+ /// @debug url-encode('path/to/file.js'); // 'path%2Fto%2Ffile.js'
56
+ /// @debug url-encode('name=John Doe'); // 'name%3DJohn%20Doe'
57
+ /// @param {String} $value - Строка для кодирования в URL.
58
+ /// Может содержать любые символы, включая зарезервированные
59
+ /// символы URL. Функция заменит все символы из карты замены
60
+ /// на их процентное представление.
61
+ /// @param {Map} $chars-map [configs.$set-url-reserved-chars] -
62
+ /// Карта замены символов для кодирования. По умолчанию
63
+ /// используется глобальная конфигурация из
64
+ /// `configs.$set-url-reserved-chars`. Карта должна содержать
65
+ /// пары ключ-значение, где ключ - символ для замены,
66
+ /// значение - процентное представление символа.
67
+ /// @return {String} - Закодированная строка, где все символы
68
+ /// из карты замены преобразованы в их процентное
69
+ /// представление. Строка безопасна для использования в
70
+ /// любой части URL (path, query, fragment).
71
+ /// @throws {Error} - Может выбросить ошибку при передаче
72
+ /// нестрокового значения или если функция `string-replace`
73
+ /// не определена. Требуется наличие функции `string-replace`
74
+ /// в доступном scope.
75
+ /// @require {function} string-replace - Вспомогательная
76
+ /// функция замены подстрок в строке. Должна быть определена
77
+ /// и доступна для корректной работы данной функции.
78
+ /// @require {variable} configs.$set-url-reserved-chars -
79
+ /// Глобальная переменная с картой зарезервированных символов
80
+ /// URL. Содержит маппинг символов на их процентное
81
+ /// кодирование по умолчанию.
82
+ @function url-encode(
83
+ $value,
84
+ $chars-map: configs.$set-url-reserved-chars) {
85
+
86
+ // Проверка типа первого параметра: ожидается строковое значение.
87
+ // Функция is-string() проверяет, является ли $value строкой
88
+ // (тип данных string).
89
+ @if not is-string($value) {
90
+
91
+ // Если $value не является строкой, возвращаем ошибку через
92
+ // стандартную функцию логирования. Это предотвращает
93
+ // некорректные операции кодирования с нестроковыми данными.
94
+ @return log-invalid-type(
95
+ 'url-encode',
96
+ $value,
97
+ '$value',
98
+ 'string'
99
+ );
100
+
101
+ }
102
+
103
+ // Проверка типа второго параметра: ожидается карта (map) символов.
104
+ // $chars-map содержит сопоставление символов, которые нужно заменить,
105
+ // с их URL-закодированными представлениями. По умолчанию используется
106
+ // значение из конфигурации configs.$set-url-reserved-chars.
107
+ @else if not is-map($chars-map) {
108
+
109
+ // Если $chars-map не является картой, возвращаем ошибку.
110
+ // Проверка выполняется только если $value прошел валидацию.
111
+ @return log-invalid-type(
112
+ 'url-encode',
113
+ $chars-map,
114
+ '$chars-map',
115
+ 'map'
116
+ );
117
+
118
+ }
119
+
120
+ // Все параметры прошли валидацию - выполняем кодирование строки.
121
+ @else {
122
+
123
+ // Инициализация переменной для хранения результата.
124
+ // Начинаем с исходного значения, которое будет постепенно
125
+ // преобразовываться путем замены символов.
126
+ $-result: $value;
127
+
128
+ // Итерация по всем парам ключ-значение в карте символов.
129
+ // - $string: символ или последовательность символов для замены.
130
+ // - $replacement: закодированное представление символа для URL.
131
+ @each $string, $replacement in $chars-map {
132
+
133
+ // Замена каждого вхождения $string на $replacement в строке.
134
+ // Функция string-replace() выполняет глобальную замену
135
+ // всех вхождений искомой подстроки.
136
+ $-result: string-replace($-result, $string, $replacement);
137
+
138
+ }
139
+
140
+ // Возвращаем закодированную строку, безопасную для использования в URL.
141
+ // Все символы, указанные в $chars-map, будут заменены на их
142
+ // URL-закодированные эквиваленты (обычно в формате %XX,
143
+ // где XX - шестнадцатеричный код символа).
144
+ @return $-result;
145
+
146
+ }
147
+
148
+ }
@@ -0,0 +1,111 @@
1
+ @use 'sass:math';
2
+
3
+ /// Округляет число вверх до ближайшего кратного значения.
4
+ ///
5
+ /// Функция выполняет округление числа вверх (в сторону
6
+ /// положительной бесконечности) до ближайшего значения,
7
+ /// кратного указанному числу.
8
+ ///
9
+ /// Используется для выравнивания значений по сетке или
10
+ /// заданному шагу.
11
+ ///
12
+ /// Важные особенности функции:
13
+ /// - Всегда округляет вверх (в сторону увеличения)
14
+ /// - Работает с положительными и отрицательными числами
15
+ /// - Сохраняет единицы измерения исходного числа
16
+ /// - Использует `math.ceil()` для округления вверх
17
+ /// - Поддерживает дробные значения для `$nearest`
18
+ /// - Использует математически корректное деление через
19
+ /// `math.div()`
20
+ /// ---
21
+ /// @name number-ceil-to
22
+ /// @group utilities-helpers
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#ceil См. также: Официальная документация Sass - Функция math.ceil()
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/Math/ceil MDN Web Docs - Math.ceil()
31
+ /// @link https://css-tricks.com/snippets/sass/ См. также: CSS-Tricks - Коллекция сниппетов Sass
32
+ /// @link https://sass-guidelin.es/ru/#math-functions См. также: Sass Guidelines - Математические функции
33
+ /// @link https://frontender.info/sass-numbers/ См. также: Frontender Magazine - Работа с числами в Sass
34
+ /// @link https://www.w3schools.com/sass/sass_functions_numeric.php См. также: W3Schools - Числовые функции в Sass
35
+ /// @link https://habr.com/ru/post/247887/ См. также: Habr - Статья "Sass для верстальщика: числа и математика"
36
+ /// @example scss - Округление вверх до ближайшего кратного
37
+ /// @debug number-ceil-to(13, 5); // 15
38
+ /// @debug number-ceil-to(17, 10); // 20
39
+ /// @debug number-ceil-to(23, 4); // 24
40
+ /// @debug number-ceil-to(100, 50); // 100
41
+ /// @debug number-ceil-to(101, 50); // 150
42
+ /// @example scss - Округление дробных чисел
43
+ /// @debug number-ceil-to(12.3, 5); // 15
44
+ /// @debug number-ceil-to(3.14, 1); // 4
45
+ /// @debug number-ceil-to(7.89, 2.5); // 10
46
+ /// @debug number-ceil-to(0.333, 0.25); // 0.5
47
+ /// @example scss - Округление отрицательных чисел
48
+ /// @debug number-ceil-to(-13, 5); // -10
49
+ /// @debug number-ceil-to(-17, 10); // -10
50
+ /// @debug number-ceil-to(-23, 4); // -20
51
+ /// @debug number-ceil-to(-3.5, 1); // -3
52
+ /// @example scss - Округление чисел с единицами измерения
53
+ /// @debug number-ceil-to(13px, 5px); // 15px
54
+ /// @debug number-ceil-to(1.7rem, 0.5rem); // 2rem
55
+ /// @debug number-ceil-to(45%, 10%); // 50%
56
+ /// @debug number-ceil-to(120deg, 90deg); // 180deg
57
+ /// @example scss - Практическое использование для сетки
58
+ /// $item-width: 287px;
59
+ /// $grid-step: 12px;
60
+ /// $aligned-width: number-ceil-to($item-width, $grid-step);
61
+ ///
62
+ /// // $aligned-width: 288px
63
+ /// .grid-item {
64
+ /// width: $aligned-width;
65
+ /// }
66
+ /// @example css - Результат
67
+ /// .grid-item {
68
+ /// width: 288px;
69
+ /// }
70
+ /// @example scss - Практическое использование для типографики
71
+ /// $font-size: 15.3px;
72
+ /// $type-scale: 2px;
73
+ /// $aligned-font-size: number-ceil-to($font-size, $type-scale);
74
+ ///
75
+ /// // $aligned-font-size: 16px
76
+ /// .text {
77
+ /// font-size: $aligned-font-size;
78
+ /// }
79
+ /// @example css - Результат
80
+ /// .text {
81
+ /// font-size: 16px;
82
+ /// }
83
+ /// @example scss - Практическое использование для интервалов
84
+ /// $spacing: 23px;
85
+ /// $spacing-step: 8px;
86
+ /// $consistent-spacing: number-ceil-to($spacing, $spacing-step);
87
+ ///
88
+ /// // $consistent-spacing: 24px
89
+ /// .container {
90
+ /// padding: $consistent-spacing;
91
+ /// }
92
+ /// @example css - Результат
93
+ /// .container {
94
+ /// padding: 24px;
95
+ /// }
96
+ /// @param {Number} $value - Число для округления. Может быть
97
+ /// любым числом: положительным, отрицательным, целым,
98
+ /// дробным, с единицами измерения или без них.
99
+ /// @param {Number} $nearest - Кратное значение, до которого
100
+ /// нужно округлить. Определяет шаг округления. Может быть
101
+ /// дробным числом. Рекомендуется использовать те же единицы
102
+ /// измерения, что и у `$value`.
103
+ /// @return {Number} - Число, округленное вверх до ближайшего
104
+ /// значения, кратного `$nearest`. Сохраняет единицы
105
+ /// измерения исходного числа `$value`.
106
+ /// @throws {Error} - Может выбросить ошибку если `$value` или
107
+ /// `$nearest` не являются числами, или если происходит
108
+ /// деление на ноль.
109
+ @function number-ceil-to($value, $nearest) {
110
+ @return math.ceil(math.div($value, $nearest)) * $nearest;
111
+ }
@@ -0,0 +1,92 @@
1
+ @use 'sass:math';
2
+
3
+ /// Ограничивает число сверху, обеспечивая максимальное
4
+ /// значение.
5
+ ///
6
+ /// Функция принимает число и максимальную границу, и
7
+ /// возвращает наименьшее из этих двух значений. Если число
8
+ /// больше максимального значения, возвращается максимальное
9
+ /// значение. В противном случае возвращается исходное число.
10
+ ///
11
+ /// Визуализация работы:
12
+ /// - Если `value > max` → возвращает `max`
13
+ /// - Если `value ≤ max` → возвращает `value`
14
+ ///
15
+ /// Важные особенности функции:
16
+ /// - Гарантирует, что результат будет не больше `$max`
17
+ /// - Использует встроенную функцию `math.min()`
18
+ /// - Работает с любыми числовыми значениями (целые, дробные,
19
+ /// с единицами)
20
+ /// - Сохраняет единицы измерения исходного значения при их
21
+ /// наличии
22
+ /// - Не изменяет значения, уже меньшие или равные максимальному
23
+ /// - Обрабатывает отрицательные числа и ноль
24
+ /// - Полезна для установки максимальных границ
25
+ /// - Частный случай функции `number-clamp()` без нижней границы
26
+ /// ---
27
+ /// @name number-clamp-max
28
+ /// @group utilities-helpers
29
+ /// @since 2025.12.27
30
+ /// @access public
31
+ /// @author Murad Rustamov (therteenten)
32
+ /// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
33
+ /// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
34
+ /// @link https://sass-lang.com/documentation/values/numbers См. также: Официальная документация Sass - Тип данных "Числа"
35
+ /// @link https://sass-lang.com/documentation/modules/math См. также: Официальная документация Sass - Модуль math
36
+ /// @link https://sass-lang.com/documentation/modules/math#min См. также: Официальная документация Sass - Функция math.min()
37
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/min См. также: MDN Web Docs - CSS-функция min()
38
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/max См. также: MDN Web Docs - CSS-функция max()
39
+ /// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min См. также: MDN Web Docs - JavaScript Math.min()
40
+ /// @link https://css-tricks.com/snippets/sass/ См. также: CSS-Tricks - Коллекция сниппетов Sass
41
+ /// @link https://sass-guidelin.es/ru/#section-41 См. также: Sass Guidelines - Раздел про математические операции
42
+ /// @link https://www.w3schools.com/css/css_math_functions.asp См. также: W3Schools - CSS математические функции
43
+ /// @example scss - Ограничение сверху
44
+ /// @debug number-clamp-max(5, 10); // 5
45
+ /// @debug number-clamp-max(15, 10); // 10 (больше максимума)
46
+ /// @debug number-clamp-max(0, 10); // 0
47
+ /// @debug number-clamp-max(10, 10); // 10 (равно максимуму)
48
+ /// @debug number-clamp-max(-5, 10); // -5
49
+ /// @example scss - Ограничение дробных чисел
50
+ /// @debug number-clamp-max(3.14, 5); // 3.14
51
+ /// @debug number-clamp-max(6.28, 5); // 5
52
+ /// @debug number-clamp-max(1.0, 5); // 1
53
+ /// @debug number-clamp-max(2.718, 3.5); // 2.718
54
+ /// @debug number-clamp-max(3.501, 3.5); // 3.5
55
+ /// @example scss - Отрицательные максимальные значения
56
+ /// @debug number-clamp-max(5, -10); // -10
57
+ /// @debug number-clamp-max(-5, -10); // -10
58
+ /// @debug number-clamp-max(-15, -10); // -15
59
+ /// @debug number-clamp-max(0, -10); // -10
60
+ /// @debug number-clamp-max(-3.5, -5); // -5
61
+ /// @example scss - Ограничение с единицами измерения
62
+ /// @debug number-clamp-max(25px, 32px); // 25px
63
+ /// @debug number-clamp-max(40px, 32px); // 32px
64
+ /// @debug number-clamp-max(10px, 32px); // 10px
65
+ /// @debug number-clamp-max(1.5rem, 2rem); // 1.5rem
66
+ /// @debug number-clamp-max(2.5rem, 2rem); // 2rem
67
+ /// @debug number-clamp-max(0.5rem, 2rem); // 0.5rem
68
+ /// @debug number-clamp-max(150%, 100%); // 100%
69
+ /// @example scss - Граничные случаи
70
+ /// @debug number-clamp-max(0, 0); // 0
71
+ /// @debug number-clamp-max(100, 0); // 0
72
+ /// @debug number-clamp-max(-0, -10); // -10
73
+ /// @debug number-clamp-max(1e-10, 1); // 0.0000000001
74
+ /// @debug number-clamp-max(1000, 100); // 100
75
+ /// @debug number-clamp-max(-1000, -100); // -1000
76
+ /// @debug number-clamp-max(999.999, 1000); // 999.999
77
+ /// @param {Number} $value - Число, которое нужно ограничить
78
+ /// сверху. Может быть любым числом: целым, дробным,
79
+ /// положительным, отрицательным, с единицами измерения
80
+ /// или без.
81
+ /// @param {Number} $max - Максимальное допустимое значение.
82
+ /// Если `$value` больше `$max`, возвращается `$max`.
83
+ /// @return {Number} - Наименьшее из двух значений: `$value`
84
+ /// или `$max`. Если `$value` меньше или равно `$max`,
85
+ /// возвращается `$value`. В противном случае возвращается
86
+ /// `$max`.
87
+ /// @throws Не выбрасывает ошибок, безопасно обрабатывает
88
+ /// все числовые значения. Оба аргумента должны быть
89
+ /// числами для корректной работы.
90
+ @function number-clamp-max($value, $max) {
91
+ @return math.min($value, $max);
92
+ }
@@ -0,0 +1,100 @@
1
+ @use 'sass:math';
2
+
3
+ /// Ограничивает число снизу, обеспечивая минимальное значение.
4
+ ///
5
+ /// Функция принимает число и минимальную границу, и
6
+ /// возвращает наибольшее из этих двух значений. Если число
7
+ /// меньше минимального значения, возвращается минимальное
8
+ /// значение. В противном случае возвращается исходное число.
9
+ ///
10
+ /// Визуализация работы:
11
+ /// - Если `value < min` → возвращает `min`
12
+ /// - Если `value ≥ min` → возвращает `value`
13
+ ///
14
+ /// Важные особенности функции:
15
+ /// - Гарантирует, что результат будет не меньше `$min`
16
+ /// - Использует встроенную функцию `math.max()`
17
+ /// - Работает с любыми числовыми значениями (целые, дробные,
18
+ /// с единицами)
19
+ /// - Сохраняет единицы измерения исходного значения при их
20
+ /// наличии
21
+ /// - Не изменяет значения, уже большие или равные минимальному
22
+ /// - Обрабатывает отрицательные числа и ноль
23
+ /// - Полезна для установки минимальных границ
24
+ /// - Частный случай функции `number-clamp()` без верхней
25
+ /// границы
26
+ ///
27
+ /// > Функция является оберткой над `math.max()` с семантически
28
+ /// > ясным названием, которое явно указывает на ограничение
29
+ /// > снизу. Является частным случаем функции `number-clamp()`,
30
+ /// > где не указана верхняя граница. Эта функция особенно
31
+ /// > полезна для доступности (accessibility), гарантируя
32
+ /// > минимальные размеры для взаимодействия и минимальные
33
+ /// > временные интервалы для восприятия.
34
+ /// ---
35
+ /// @name number-clamp-min
36
+ /// @group utilities-helpers
37
+ /// @since 2025.12.27
38
+ /// @access public
39
+ /// @author Murad Rustamov (therteenten)
40
+ /// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
41
+ /// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
42
+ /// @link https://sass-lang.com/documentation/values/numbers См. также: Официальная документация Sass - Тип данных "Числа"
43
+ /// @link https://sass-lang.com/documentation/modules/math См. также: Официальная документация Sass - Модуль math
44
+ /// @link https://sass-lang.com/documentation/modules/math#max См. также: Официальная документация Sass - Функция math.max()
45
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/min См. также: MDN Web Docs - CSS-функция min()
46
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/max См. также: MDN Web Docs - CSS-функция max()
47
+ /// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max См. также: MDN Web Docs - JavaScript Math.max()
48
+ /// @link https://css-tricks.com/snippets/sass/ См. также: CSS-Tricks - Коллекция сниппетов Sass
49
+ /// @link https://sass-guidelin.es/ru/#section-41 См. также: Sass Guidelines - Раздел про математические операции
50
+ /// @link https://www.w3schools.com/css/css_math_functions.asp См. также: W3Schools - CSS математические функции
51
+ /// @example scss - Ограничение снизу
52
+ /// @debug number-clamp-min(5, 1); // 5
53
+ /// @debug number-clamp-min(15, 1); // 15
54
+ /// @debug number-clamp-min(0, 1); // 1 (меньше минимума)
55
+ /// @debug number-clamp-min(1, 1); // 1 (равно минимуму)
56
+ /// @debug number-clamp-min(-5, 1); // 1
57
+ /// @example scss - Ограничение дробных чисел
58
+ /// @debug number-clamp-min(3.14, 1); // 3.14
59
+ /// @debug number-clamp-min(0.5, 1); // 1
60
+ /// @debug number-clamp-min(1.0, 1); // 1
61
+ /// @debug number-clamp-min(2.718, 1.5); // 2.718
62
+ /// @debug number-clamp-min(1.499, 1.5); // 1.5
63
+ /// @example scss - Отрицательные минимальные значения
64
+ /// @debug number-clamp-min(5, -10); // 5
65
+ /// @debug number-clamp-min(-5, -10); // -5
66
+ /// @debug number-clamp-min(-15, -10); // -10
67
+ /// @debug number-clamp-min(0, -10); // 0
68
+ /// @debug number-clamp-min(-3.5, -5); // -3.5
69
+ /// @example scss - Ограничение с единицами измерения
70
+ /// @debug number-clamp-min(25px, 16px); // 25px
71
+ /// @debug number-clamp-min(10px, 16px); // 16px
72
+ /// @debug number-clamp-min(40px, 16px); // 40px
73
+ /// @debug number-clamp-min(1.5rem, 1rem); // 1.5rem
74
+ /// @debug number-clamp-min(0.5rem, 1rem); // 1rem
75
+ /// @debug number-clamp-min(2.5rem, 1rem); // 2.5rem
76
+ /// @debug number-clamp-min(100%, 50%); // 100%
77
+ /// @example scss - Граничные случаи
78
+ /// @debug number-clamp-min(0, 0); // 0
79
+ /// @debug number-clamp-min(100, 0); // 100
80
+ /// @debug number-clamp-min(-0, -10); // 0
81
+ /// @debug number-clamp-min(1e-10, 0); // 0.0000000001
82
+ /// @debug number-clamp-min(1000, 0); // 1000
83
+ /// @debug number-clamp-min(-1000, -100); // -100
84
+ /// @debug number-clamp-min(0.000001, 0); // 0.000001
85
+ /// @param {Number} $value - Число, которое нужно ограничить
86
+ /// снизу. Может быть любым числом: целым, дробным,
87
+ /// положительным, отрицательным, с единицами измерения или
88
+ /// без.
89
+ /// @param {Number} $min - Минимальное допустимое значение.
90
+ /// Если `$value` меньше `$min`, возвращается `$min`.
91
+ /// @return {Number} - Наибольшее из двух значений: `$value`
92
+ /// или `$min`. Если `$value` больше или равно `$min`,
93
+ /// возвращается `$value`. В противном случае возвращается
94
+ /// `$min`.
95
+ /// @throws Не выбрасывает ошибок, безопасно обрабатывает все
96
+ /// числовые значения. Оба аргумента должны быть числами
97
+ /// для корректной работы.
98
+ @function number-clamp-min($value, $min) {
99
+ @return math.max($value, $min);
100
+ }
@@ -0,0 +1,109 @@
1
+ @use 'sass:math';
2
+
3
+ /// Ограничивает число заданным диапазоном значений.
4
+ ///
5
+ /// Функция принимает число и возвращает его значение,
6
+ /// ограниченное минимальной и максимальной границами. Если
7
+ /// число меньше минимального значения, возвращается
8
+ /// минимальное значение. Если число больше максимального
9
+ /// значения, возвращается максимальное значение.
10
+ ///
11
+ /// В противном случае возвращается исходное число.
12
+ ///
13
+ /// Визуализация работы:
14
+ /// - Если `value < min` → возвращает `min`
15
+ /// - Если `value > max` → возвращает `max`
16
+ /// - Если `min ≤ value ≤ max` → возвращает `value`
17
+ ///
18
+ /// Важные особенности функции:
19
+ /// - Гарантирует, что результат будет в диапазоне `[$min, $max]`
20
+ /// - Использует встроенные функции `math.max()` и `math.min()`
21
+ /// - Работает с любыми числовыми значениями (целые, дробные,
22
+ /// с единицами)
23
+ /// - Сохраняет единицы измерения исходного значения при их
24
+ /// наличии
25
+ /// - Не изменяет значения, уже находящиеся в диапазоне
26
+ /// - Обрабатывает отрицательные числа и ноль
27
+ /// - Может использоваться для нормализации значений
28
+ ///
29
+ /// > Функция является аналогом CSS-функции `clamp()`, но
30
+ /// > работает на этапе компиляции Sass. В отличие от CSS
31
+ /// > `clamp()`, которая динамически вычисляется браузером,
32
+ /// > `number-clamp()` вычисляется один раз при компиляции и
33
+ /// > возвращает фиксированное значение. Для обеспечения
34
+ /// > корректной работы рекомендуется всегда передавать
35
+ /// > `$min ≤ $max`. При `$min > $max` функция все равно
36
+ /// > работает, но результат может отличаться от ожидаемого.
37
+ /// ---
38
+ /// @name number-clamp
39
+ /// @group utilities-helpers
40
+ /// @since 2025.12.27
41
+ /// @access public
42
+ /// @author Murad Rustamov (therteenten)
43
+ /// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
44
+ /// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
45
+ /// @link https://sass-lang.com/documentation/values/numbers См. также: Официальная документация Sass - Тип данных "Числа"
46
+ /// @link https://sass-lang.com/documentation/modules/math См. также: Официальная документация Sass - Модуль math
47
+ /// @link https://sass-lang.com/documentation/modules/math#min См. также: Официальная документация Sass - Функция math.min()
48
+ /// @link https://sass-lang.com/documentation/modules/math#max См. также: Официальная документация Sass - Функция math.max()
49
+ /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/clamp См. также: MDN Web Docs - CSS-функция clamp()
50
+ /// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clamp См. также: MDN Web Docs - JavaScript Math.clamp()
51
+ /// @link https://css-tricks.com/snippets/sass/ См. также: CSS-Tricks - Коллекция сниппетов Sass
52
+ /// @link https://sass-guidelin.es/ru/#section-41 См. также: Sass Guidelines - Раздел про математические операции
53
+ /// @link https://www.w3schools.com/css/css_math_functions.asp См. также: W3Schools - CSS математические функции
54
+ /// @example scss - Ограничение в пределах диапазона
55
+ /// @debug number-clamp(5, 1, 10); // 5
56
+ /// @debug number-clamp(15, 1, 10); // 10 (больше максимума)
57
+ /// @debug number-clamp(0, 1, 10); // 1 (меньше минимума)
58
+ /// @debug number-clamp(1, 1, 10); // 1 (равно минимуму)
59
+ /// @debug number-clamp(10, 1, 10); // 10 (равно максимуму)
60
+ /// @example scss - Ограничение дробных чисел
61
+ /// @debug number-clamp(3.14, 1, 5); // 3.14
62
+ /// @debug number-clamp(0.5, 1, 5); // 1
63
+ /// @debug number-clamp(6.28, 1, 5); // 5
64
+ /// @debug number-clamp(2.718, 1.5, 3.5); // 2.718
65
+ /// @debug number-clamp(1.499, 1.5, 3.5); // 1.5
66
+ /// @example scss - Ограничение отрицательных чисел
67
+ /// @debug number-clamp(-5, -10, 10); // -5
68
+ /// @debug number-clamp(-15, -10, 10); // -10
69
+ /// @debug number-clamp(15, -10, 10); // 10
70
+ /// @debug number-clamp(0, -10, 10); // 0
71
+ /// @debug number-clamp(-3.5, -5, 5); // -3.5
72
+ /// @example scss - Ограничение с единицами измерения
73
+ /// @debug number-clamp(25px, 16px, 32px); // 25px
74
+ /// @debug number-clamp(10px, 16px, 32px); // 16px
75
+ /// @debug number-clamp(40px, 16px, 32px); // 32px
76
+ /// @debug number-clamp(1.5rem, 1rem, 2rem); // 1.5rem
77
+ /// @debug number-clamp(0.5rem, 1rem, 2rem); // 1rem
78
+ /// @debug number-clamp(2.5rem, 1rem, 2rem); // 2rem
79
+ /// @example scss - Граничные случаи
80
+ /// @debug number-clamp(0, 0, 100); // 0
81
+ /// @debug number-clamp(100, 0, 100); // 100
82
+ /// @debug number-clamp(-0, -10, 10); // 0
83
+ /// @debug number-clamp(1e-10, 0, 1); // 0.0000000001
84
+ /// @debug number-clamp(1000, 0, 100); // 100
85
+ /// @debug number-clamp(-1000, -100, 0); // -100
86
+ /// @example scss - Некорректные диапазоны (min > max)
87
+ /// @debug number-clamp(5, 10, 1); // 1 (ведет себя неинтуитивно!)
88
+ /// @debug number-clamp(15, 10, 1); // 1
89
+ /// @debug number-clamp(0, 10, 1); // 1
90
+ /// // Внимание: при min > max функция работает, но результат может быть
91
+ /// // неожиданным. Рекомендуется всегда передавать min ≤ max.
92
+ /// @param {Number} $value - Число, которое нужно ограничить.
93
+ /// Может быть любым числом: целым, дробным, положительным,
94
+ /// отрицательным, с единицами измерения или без.
95
+ /// @param {Number} $min - Минимальное допустимое значение.
96
+ /// Если `$value` меньше `$min`, возвращается `$min`.
97
+ /// @param {Number} $max - Максимальное допустимое значение.
98
+ /// Если `$value` больше `$max`, возвращается `$max`.
99
+ /// @return {Number} - Значение `$value`, ограниченное
100
+ /// диапазоном `[$min, $max]`. Если `$value` находится в
101
+ /// пределах диапазона, возвращается исходное значение. В
102
+ /// противном случае возвращается соответствующая граница
103
+ /// диапазона.
104
+ /// @throws {Error} - Не выбрасывает ошибок, даже при
105
+ /// некорректных диапазонах (когда `$min > $max`). Однако
106
+ /// в таких случаях поведение функции может быть неинтуитивным.
107
+ @function number-clamp($value, $min, $max) {
108
+ @return math.min(math.max($value, $min), $max);
109
+ }