CSS-функция `mod()`

mod() CSS-функция возвращает остаток от деления первого параметра на второй, подобно оператору остатка от деления (%) в JavaScript. Остаток от деления — это значение, остающееся после деления одного операнда, делимого, на другой операнд, делитель. Знак остатка всегда совпадает со знаком делителя.

Вычисление имеет вид a - (Math.floor(a / b) * b). Например, CSS-функция mod(21, -4) возвращает остаток от деления -3. Полное вычисление имеет вид 21 - (Math.floor(21 / -4) * -4). При делении 21 на -4 результат равен -5.25. Это округляется вниз до -6. Умножение -6 на -4 равно 24. Вычитая это значение 24 из исходного 21, получаем остаток -3.

Синтаксис

/* Unitless <number> */
line-height: mod(7, 2); /* 1 */
line-height: mod(14, 5); /* 4 */
line-height: mod(3.5, 2); /* 1.5 */

/* Unit based <percentage> and <dimension> */
margin: mod(15%, 2%); /* 1% */
margin: mod(18px, 4px); /* 2px */
margin: mod(19rem, 5rem); /* 4rem */
margin: mod(29vmin, 6vmin); /* 5vmin */
margin: mod(1000px, 29rem); /* 72px - if root font-size is 16px */

/* Negative/positive values */
rotate: mod(100deg, 30deg); /* 10deg */
rotate: mod(135deg, -90deg); /* -45deg */
rotate: mod(-70deg, 20deg); /* 10deg */
rotate: mod(-70deg, -15deg); /* -10deg */

/* Calculations */
scale: mod(10 * 2, 1.7); /* 1.3 */
rotate: mod(10turn, 18turn / 3); /* 4turn */
transition-duration: mod(20s / 2, 3000ms * 2); /* 4s */

Параметры

Функция mod(dividend, divisor) принимает два значения, разделённых запятой. Чтобы функция была корректной, оба параметра должны иметь один и тот же тип: число, размерность или <percentage>. Единицы измерения в параметрах могут различаться, но они должны относиться к одному типу размерности, например <length>, <angle>, <time> или <frequency>.

dividend

Вычисление, результатом которого является <number>, <dimension> или <percentage>, представляющее делимое.

divisor

Вычисление, результатом которого является <number>, <dimension> или <percentage>, представляющее делитель.

Возвращаемое значение

Возвращает <number>, <dimension> или <percentage> (соответствующее типу параметров), представляющее остаток от деления.

• Если divisor равно 0, результат — NaN.
• Если dividend равно infinite, результат — NaN.
• Если divisor положительное, результат положительный (0⁺), а если divisor отрицательное, результат отрицательный (0⁻).

Формальный синтаксис

<mod()> = 
  mod( <calc-sum>, <calc-sum> )

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> = 
  <calc-value> [ '*' <calc-value> | '/' <number> ]*

<calc-value> = 
  <number> |
  <dimension> |
  <percentage> |
  <calc-constant> |
  ( <calc-sum> )

<calc-constant> = 
  e |
  pi |
  infinity |
  -infinity |
  NaN

Спецификации

Совместимость с браузерами

См. также

• round()
• rem()