MENU


Functions

Sass comes with many built-in functions.

RGB: rgb(),rgba(),red(),green(),blue(),mix()

HSL: hsl(), hsla(), hue(), saturation(), lightness(), adjust-hue(), lighten(), darken(), saturate(), desaturate(), grayscale(), complement(), invert()

Opacity: alpha(), rgba(), opacify(), tranparentize()

Color: adjust-color(), scale-color(), change-color(), ie-hex-str()

String: unquote(), quote(), str-length(), str-insert(), str-index(), str-slice(), to-upper-case(), to-lower-case()

Number: percentage(), round(), ceil(), floor(), abs(), min(), max(), random()

List: length(), nth(), set-nth(), join(), append(), zip(), index(), list-separator()

Map: map-get(), map-merge(), map-remove(), map-keys(), map-values(), map-has-key(), keywords()

Selector: selector-nest(), selector-append(), selector-extend(), selector-replace(), selector-unify(), is-superselector(), simple-selectors(), selector-parse()

Introspection: feature-exists(), variable-exists(), global-variable-exists(), function-exists(), mixin-exists(), inspect(), type-of(), unit(), unitless(), comparable(), call()

Miscellaneous: if(), unique-id()



You can also define your own functions.
The underscore _ and the dash - can be used interchangeably in function names.
$grid-length: 40px;
$gutter-length: 10px;

@function grid-length($n) {
  @return $n * $grid-length + ($n - 1) * $gutter-length;
}

#sidebar { 
   width: grid-length(5); 
   height: grid_length($n: 5);
}

#sidebar {
  width: 240px;
  height: 240px;
}