Syntax

Description: A math Function is defined as a built-in helper Function relating to maths.

ctr('<#selector>', {
<...>: <Function>(<...>)
})
<#selector>:
<...>: <Function>(<...>)
<#selector> {
<prop>: <value>;
}

Notes

Abs

Description: Returns the absolute value.

Edit
ctr('.test', {
width: 200px
font-size: abs(-5px)
})
.test:
width: 200px
font-size: abs(-5px)
.test {
width: 200px;
font-size: 5px;
}
ctr('.test', {
  width: 200px
  font-size: abs(-5px)
})
.test {
  width: 200px;
  font-size: 5px;
}
.test:
  width: 200px
  font-size: abs(-5px)

Notes

Avg

Description: Returns the numerical averages of a List.

Edit
ctr('.test', {
width: 200px
z-index: avg(100 200 300)
})
.test:
width: 200px
z-index: avg(100 200 300)
.test {
width: 200px;
z-index: 200;
}
ctr('.test', {
  width: 200px
  z-index: avg(100 200 300)
})
.test {
  width: 200px;
  z-index: 200;
}
.test:
  width: 200px
  z-index: avg(100 200 300)

Notes

Ceil

Description: Returns the smallest integer greater than or equal to a given Number.

Edit
ctr('.test', {
width: 200px
font-size: ceil(5.5em)
})
.test:
width: 200px
font-size: ceil(5.5em)
.test {
width: 200px;
font-size: 6em;
}
ctr('.test', {
  width: 200px
  font-size: ceil(5.5em)
})
.test {
  width: 200px;
  font-size: 6em;
}
.test:
  width: 200px
  font-size: ceil(5.5em)

Notes

Cos

Description: Returns the cosine of the given angle. If the angle is given as a degree unit, like 45deg, it is treated as a degree, otherwise it is treated as radians.

Edit
ctr('.test', {
width: 200px
transform: rotate(unit(cos(3*PI/4), deg))
})
.test:
width: 200px
transform: rotate(unit(cos(3*PI/4), deg))
.test {
width: 200px;
transform: rotate(-0.707106781deg);
}
ctr('.test', {
  width: 200px
  transform: rotate(unit(cos(3*PI/4), deg))
})
.test {
  width: 200px;
  transform: rotate(-0.707106781deg);
}
.test:
  width: 200px
  transform: rotate(unit(cos(3*PI/4), deg))

Notes

Floor

Description: Returns the largest integer less than or equal to a given Number.

Edit
ctr('.test', {
width: 200px
font-size: floor(5.6em)
})
.test:
width: 200px
font-size: floor(5.6em)
.test {
width: 200px;
font-size: 5em;
}
ctr('.test', {
  width: 200px
  font-size: floor(5.6em)
})
.test {
  width: 200px;
  font-size: 5em;
}
.test:
  width: 200px
  font-size: floor(5.6em)

Notes

Max

Description: Returns the largest of two Numbers.

Edit
ctr('.test', {
width: 200px
z-index: max(1.122, 11.22)
})
.test:
width: 200px
z-index: max(1.122, 11.22)
.test {
width: 200px;
z-index: 11.22;
}
ctr('.test', {
  width: 200px
  z-index: max(1.122, 11.22)
})
.test {
  width: 200px;
  z-index: 11.22;
}
.test:
  width: 200px
  z-index: max(1.122, 11.22)

Notes

Min

Description: Returns the smallest of two Numbers.

Edit
ctr('.test', {
width: 200px
z-index: min(1.122, 11.22)
})
.test:
width: 200px
z-index: min(1.122, 11.22)
.test {
width: 200px;
z-index: 1.122;
}
ctr('.test', {
  width: 200px
  z-index: min(1.122, 11.22)
})
.test {
  width: 200px;
  z-index: 1.122;
}
.test:
  width: 200px
  z-index: min(1.122, 11.22)

Notes

Percentage

Description: Converts a Number into a percentage value.

Edit
ctr('.test', {
width: 200px
border-radius: percentage(4 / 100)
})
.test:
width: 200px
border-radius: percentage(4 / 100)
.test {
width: 200px;
border-radius: 4%;
}
ctr('.test', {
  width: 200px
  border-radius: percentage(4 / 100)
})
.test {
  width: 200px;
  border-radius: 4%;
}
.test:
  width: 200px
  border-radius: percentage(4 / 100)

Notes

Round

Description: Returns the value of a Number rounded to the nearest integer.

Edit
ctr('.test', {
width: round(199.5px)
height: round(199.4px)
})
.test:
width: round(199.5px)
height: round(199.4px)
.test {
width: 200px;
height: 199px;
}
ctr('.test', {
  width: round(199.5px)
  height: round(199.4px)
})
.test {
  width: 200px;
  height: 199px;
}
.test:
  width: round(199.5px)
  height: round(199.4px)

Notes

Sin

Description: Returns the sine of the given angle. If the angle is given as a degree unit, like 45deg, it is treated as a degree, otherwise it is treated as radians.

Edit
ctr('.test', {
width: 200px
transform: rotate(unit(sin(3*PI/4), deg))
})
.test:
width: 200px
transform: rotate(unit(sin(3*PI/4), deg))
.test {
width: 200px;
transform: rotate(0.707106781deg);
}
ctr('.test', {
  width: 200px
  transform: rotate(unit(sin(3*PI/4), deg))
})
.test {
  width: 200px;
  transform: rotate(0.707106781deg);
}
.test:
  width: 200px
  transform: rotate(unit(sin(3*PI/4), deg))

Notes

Tan

Description: Returns the tangent of the given angle. If the angle is given as a degree unit, like 45deg, it is treated as a degree, otherwise it is treated as radians.

Edit
ctr('.test', {
width: 200px
transform: rotate(unit(tan(3*PI/4), deg))
})
.test:
width: 200px
transform: rotate(unit(tan(3*PI/4), deg))
.test {
width: 200px;
transform: rotate(-1deg);
}
ctr('.test', {
  width: 200px
  transform: rotate(unit(tan(3*PI/4), deg))
})
.test {
  width: 200px;
  transform: rotate(-1deg);
}
.test:
  width: 200px
  transform: rotate(unit(tan(3*PI/4), deg))

Notes