Functions
With the help of SCSS, we have created a library of re-usable functions that you can use to write more efficient and enhanced styles.
"Functions allow you to define complex operations on...values that you can re-use throughout your stylesheet. They make it easy to abstract out common formulas and behaviors in a readable way."
- sasslang.com
Example
/* Define functions that detect the $borderWidth variable and fallback to 2px */
@function get-theme-border-width($width: 2px) {
@return if(global-variable-exists(borderWidth), $borderWidth, $width);
}
/* Call mixin */
.foo {
border-width: get-theme-border-width();
border-style: solid;
border-color: $primaryColor;
}
.foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Updated almost 4 years ago