@while The @while directive takes a SassScript expression and repeatedly outputs the nested styles until the statement evaluates to false. This can be used to achieve more complex looping than the @for statement is capable of, although this is rarely necessary. For example: $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } is compiled to: .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

ceil($number) Rounds a number up to the next whole number. Examples: ceil(10.4px) => 11px ceil(10.6px) => 11px Parameters: $number (Number) Returns: (Number) Raises: (ArgumentError) — if $number isn’t a 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)

@if The @if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null: p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } } is compiled to: p { border: 1px solid; } The @if statement can be followed by several @else if statements and one @else statement. If the @if statement fails, the @else if statements are tried in order until one s

: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

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

inspect($value) Return a string containing the value as its Sass representation. Parameters: $value (Base) — The value to inspect. Returns: (String) — A representation of the value as it would be written in Sass.

grayscale($color) Converts a color to grayscale. This is identical to desaturate(color, 100%). Parameters: $color (Color) Returns: (Color) Raises: (ArgumentError) — if $color isn’t a color