type_of

type_of($value) Returns the type of a value. Examples: type-of(100px) => number type-of(asdf) => string type-of("asdf") => string type-of(true) => bool type-of(#fff) => color type-of(blue) => color Parameters: $value (Base) — The value to inspect Returns: (String) — The unquoted string name of the value’s type

@mixin

Defining a Mixin: @mixin Mixins are defined with the @mixin directive. It’s followed by the name of the mixin and optionally the arguments, and a block containing the contents of the mixin. For example, the large-text mixin is defined as follows: @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } Mixins may also contain selectors, possibly mixed with properties. The selectors can even contain parent references. For example: @mixin clearfi

nth

nth($list, $n) Gets the nth item in a list. Note that unlike some languages, the first item in a Sass list is number 1, the second number 2, and so forth. This can return the nth pair in a map as well. Negative index values address elements in reverse order, starting with the last element in the list. Examples: nth(10px 20px 30px, 1) => 10px nth((Helvetica, Arial, sans-serif), 3) => sans-serif nth((width: 10px, length: 20px), 2) => length, 20px Parameters: $list (Base) $n

alpha

alpha($color) Returns the alpha component (opacity) of a color. This is 1 unless otherwise specified. This function also supports the proprietary Microsoft alpha(opacity=20) syntax as a special case. Parameters: $color (Color) Returns: (Number) — The alpha component, between 0 and 1 Raises: (ArgumentError) — if $color isn’t a color

simple_selectors

simple_selectors($selector) Returns the simple selectors that comprise the compound selector $selector. Note that $selector must be a compound selector. That means it cannot contain commas or spaces. It also means that unlike other selector functions, this takes only strings, not lists. Examples: simple-selectors(".foo.bar") => ".foo", ".bar" simple-selectors(".foo.bar.baz") => ".foo", ".bar", ".baz" Returns A list of simple selectors in the compound selector. Parameters: $sele

rgba

rgba($red, $green, $blue, $alpha) rgba($color, $alpha) Creates a Color from red, green, blue, and alpha values. Overloads: rgba($red, $green, $blue, $alpha) Parameters: $red (Number) — The amount of red in the color. Must be between 0 and 255 inclusive or 0% and 100% inclusive $green (Number) — The amount of green in the color. Must be between 0 and 255 inclusive or 0% and 100% inclusive $blue (Number) — The amount of blue in the color. Must be between 0 and 255 inclusive

counter

counter($args...) This function only exists as a workaround for IE7‘s content: counter bug. It works identically to any other plain-CSS function, except it avoids adding spaces between the argument commas. Examples: counter(item, ".") => counter(item,".") Returns: (String)

Parentheses

Parentheses Parentheses can be used to affect the order of operations: p { width: 1em + (2em * 3); } is compiled to: p { width: 7em; }

@debug

@debug The @debug directive prints the value of a SassScript expression to the standard error output stream. It’s useful for debugging Sass files that have complicated SassScript going on. For example: @debug 10em + 12em; outputs: Line 1 DEBUG: 22em

is_superselector

is_superselector($super, $sub) Returns whether $super is a superselector of $sub. This means that $super matches all the elements that $sub matches, as well as possibly additional elements. In general, simpler selectors tend to be superselectors of more complex oned. Examples: is-superselector(".foo", ".foo.bar") => true is-superselector(".foo.bar", ".foo") => false is-superselector(".bar", ".foo .bar") => true is-superselector(".foo .bar", ".bar") => false Returns Whether $s