Functions

Code

@function rem($px, $base: 16px) {
  @return ($px / $base) * 1rem;
}

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

.title {
  font-size: rem(24px);    // 1.5rem
  padding: rem(16px);
}

.container {
  max-width: rem(960);
}

// Built-in functions: lighten, darken, transparentize,
// mix, map-get, str-length, unit, etc.

Explanation

@function defines custom logic that returns a single value, useful for unit conversions and calculations. Functions differ from mixins in that they produce values, not CSS rules. Combined with built-ins like lighten and map-get, they make stylesheets programmable.

More Sass Snippets