Function Directives It is possible to define your own functions in sass and use them in any value or script context. For example: $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } Becomes: #sidebar { width: 240px; } As you can see functions can access any globally defined variables as well as accept arguments just like a mixin. A function may have several statements contained within

selector_extend($selector, $extendee, $extender) Returns a new version of $selector with $extendee extended with $extender. This works just like the result of $selector { ... } $extender { @extend $extendee } Examples: selector-extend(".a .b", ".b", ".foo .bar") => .a .b, .a .foo .bar, .foo .a .bar Returns A list of lists of strings representing the result of the extension. This is in the same format as a selector returned by &. Parameters: $selector (String, List) — The sele

:compact Compact style takes up less space than Nested or Expanded. It also draws the focus more to the selectors than to their properties. Each CSS rule takes up only one line, with every property defined on that line. Nested rules are placed next to each other with no newline, while separate groups of rules have newlines between them. For example: #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

percentage($number) Converts a unitless number to a percentage. Examples: percentage(0.2) => 20% percentage(100px / 50px) => 200% Parameters: $number (Number) Returns: (Number) Raises: (ArgumentError) — if $number isn’t a unitless number

length($list) Return the length of a list. This can return the number of pairs in a map as well. Examples: length(10px) => 1 length(10px 20px 30px) => 3 length((width: 10px, height: 20px)) => 2 Parameters: $list (Base) Returns: (Number)

:compressed Compressed style takes up the minimum amount of space possible, having no whitespace except that necessary to separate selectors and a newline at the end of the file. It also includes some other minor compressions, such as choosing the smallest representation for colors. It’s not meant to be human-readable. For example: #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Referencing Parent Selectors: & Sometimes it’s useful to use a nested rule’s parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over or for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the & character. For example: a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } bo

to_lower_case($string) Convert a string to lower case, Examples: to-lower-case(ABCD) => abcd Parameters: $string (String) Returns: (String) Raises: (ArgumentError) — if $string isn’t a string

quote($string) Add quotes to a string if the string isn’t quoted, or returns the same string if it is. Examples: quote("foo") => "foo" quote(foo) => "foo" Parameters: $string (String) Returns: (String) Raises: (ArgumentError) — if $string isn’t a string

str_length($string) Returns the number of characters in a string. Examples: str-length("foo") => 3 Parameters: $string (String) Returns: (Number) Raises: (ArgumentError) — if $string isn’t a string