Placeholder Selectors: %foo Sass supports a special type of selector called a “placeholder selector”. These look like class and id selectors, except the # or . is replaced by %. They’re meant to be used with the @extend directive; for more information see @extend-Only Selectors. On their own, without any use of @extend, rulesets that use placeholder selectors will not be rendered to CSS.

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

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

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

saturate($color, $amount) Makes a color more saturated. Takes a color and a number between 0% and 100%, and returns a color with the saturation increased by that amount. Examples: saturate(hsl(120, 30%, 90%), 20%) => hsl(120, 50%, 90%) saturate(#855, 20%) => #9e3f3f Parameters: $color (Color) $amount (Number) — The amount to increase the saturation by, between 0% and 100% Returns: (Color) Raises: (ArgumentError) — if $amount is out of bounds, or either parameter is th

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

max($numbers...) Finds the maximum of several numbers. This function takes any number of arguments. Examples: max(1px, 4px) => 4px max(5em, 3em, 4em) => 5em Parameters: $numbers ([Number]) Returns: (Number) Raises: (ArgumentError) — if any argument isn’t a number, or if not all of the arguments have comparable units

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

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

min($numbers...) Finds the minimum of several numbers. This function takes any number of arguments. Examples: min(1px, 4px) => 1px min(5em, 3em, 4em) => 3em Parameters: $numbers ([Number]) Returns: (Number) Raises: (ArgumentError) — if any argument isn’t a number, or if not all of the arguments have comparable units