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

Find out more

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;
}