Field Manuals
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). |