Functions

GravDept uses CSS processors. This enables functions, which aren’t in the CSS spec.

Use functions to improve CSS readability.

Syntax and code standards

/**
 * @param {number} opacity - 0 to 1.0
 * @return {string}
 */
@function black ($opacity) {
    @return rgba(0, 0, 0, $opacity);
}
  • Always write a DocBlock.
  • Always return a value.

Useful functions

There are hundreds of Sass functions, but I’ve only needed a few.

Core Sass functions

Colors
darken() Make a color darker.
lighten() Make a color lighter.
Numbers
percentage() Convert a unitless number to a percentage.

Custom GravDept functions

Colors
black() Shorthand for rgba(0, 0, 0, x).
shade() Blend a color with black to darken.
tint() Blend a color with white to lighten.
white() Shorthand for rgba(255, 255, 255, x).

Resources