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

• All Function are derived from Stylus
• Rule of thumb, if you find yourself using these Functions often, you should migrate to the Javascript API
• Stylus built-in functions

Abs¶

Description: Returns the absolute value.

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

• abs(<unit>)

Avg¶

Description: Returns the numerical averages of a List.

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

• avg(<nums: List>)

Ceil¶

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

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

• ceil(<unit>)

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.

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

• cos(<angle>)

Floor¶

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

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

• floor(<unit>)

Max¶

Description: Returns the largest of two Numbers.

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

• max(<a>, <b>)

Min¶

Description: Returns the smallest of two Numbers.

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

• min(<a>, <b>)

Percentage¶

Description: Converts a Number into a percentage value.

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

• percentage(<num>)

Round¶

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

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

• round(<unit>)
• All rounding Functions can accept optional precision argument — you can pass the Number of digits you want to save after the period
  • round(5.52px, 1) === 5.5px

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.

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

• sin(<angle>)

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.

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

• tan(<angle>)