comparable($number1, $number2) Returns whether two numbers can added, subtracted, or compared. Examples: comparable(2px, 1px) => true comparable(100px, 3em) => false comparable(10cm, 3mm) => true Parameters: $number1 (Number) $number2 (Number) Returns: (Bool) Raises: (ArgumentError) — if either parameter is the wrong type

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

blue($color) Gets the blue component of a color. Calculated from HSL where necessary via this algorithm. Parameters: $color (Color) Returns: (Number) — The blue component, between 0 and 255 inclusive Raises: (ArgumentError) — if $color isn’t a color

append($list, $val, $separator:auto) Appends a single value onto the end of a list. Unless the $separator argument is passed, if the list had only one item, the resulting list will be space-separated. Like all list functions, append() returns a new list rather than modifying its argument in place. Examples: append(10px 20px, 30px) => 10px 20px 30px append((blue, red), green) => blue, red, green append(10px 20px, 30px 40px) => 10px 20px (30px 40px) append(10px, 20px, comma) => 10

call($name, $args...) Dynamically calls a function. This can call user-defined functions, built-in functions, or plain CSS functions. It will pass along all arguments, including keyword arguments, to the called function. Examples: call(rgb, 10, 100, 255) => #0a64ff call(scale-color, #0a64ff, $lightness: -10%) => #0058ef $fn: nth; call($fn, (a b c), 2) => b Parameters: $name (String) — The name of the function to call.

abs($number) Returns the absolute value of a number. Examples: abs(10px) => 10px abs(-10px) => 10px Parameters: $number (Number) Returns: (Number) Raises: (ArgumentError) — if $number isn’t a number

@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; }

adjust_hue($color, $degrees) Changes the hue of a color. Takes a color and a number of degrees (usually between -360deg and 360deg), and returns a color with the hue rotated along the color wheel by that amount. Examples: adjust-hue(hsl(120, 30%, 90%), 60deg) => hsl(180, 30%, 90%) adjust-hue(hsl(120, 30%, 90%), -60deg) => hsl(60, 30%, 90%) adjust-hue(#811, 45deg) => #886a11 Parameters: $color (Color) $degrees (Number) — The number of degrees to rotate the hue Returns:

adjust_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) Increases or decreases one or more properties of a color. This can change the red, green, blue, hue, saturation, value, and alpha properties. The properties are specified as keyword arguments, and are added to or subtracted from the color’s current value for that property. All properties are optional. You can’t specify both RGB properties ($red, $green, $blue) and HSL properties ($hue, $saturation,

@media @media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules. If a @media directive appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet. For example: .sidebar { width: 300px; @media screen and (orientation: landscape)