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

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

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

Operations All types support equality operations (== and !=). In addition, each type has its own operations that it has special support for. Number Operations SassScript supports the standard arithmetic operations on numbers (addition +, subtraction -, multiplication *, division /, and modulo %). Sass math functions preserve units during arithmetic operations. This means that, just like in real life, you cannot work on numbers with incompatible units (such as adding a number with px and em) and

opacity($color) Returns the alpha component (opacity) of a color. This is 1 unless otherwise specified. Parameters: $color (Color) Returns: (Number) — The alpha component, between 0 and 1 Raises: (ArgumentError) — if $color isn’t a color

opacify($color, $amount) Also known as: fade_in Makes a color more opaque. Takes a color and a number between 0 and 1, and returns a color with the opacity increased by that amount. Examples: opacify(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6) opacify(rgba(0, 0, 17, 0.8), 0.2) => #001 Parameters: $color (Color) $amount (Number) — The amount to increase the opacity by, between 0 and 1 Returns: (Color) Raises: (ArgumentError) — if $amount is out of bounds, or either

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

Nested Rules Sass allows CSS rules to be nested within one another. The inner rule then only applies within the outer rule’s selector. For example: #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } is compiled to: #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } This helps avoid repetition of parent selectors, and makes complex CSS layouts with lots of nested selecto

Nested Properties CSS has quite a few properties that are in “namespaces;” for instance, font-family, font-size, and font-weight are all in the font namespace. In CSS, if you want to set a bunch of properties in the same namespace, you have to type it out each time. Sass provides a shortcut for this: just write the namespace once, then nest each of the sub-properties within it. For example: .funky { font: { family: fantasy; size: 30em; weight: bold; } } is compiled to: .funky {

mixin_exists($name) Check whether a mixin with the given name exists. Examples: mixin-exists(nonexistent) => false @mixin red-text { color: red; } mixin-exists(red-text) => true Parameters: name (String) — The name of the mixin to check. Returns: (Bool) — Whether the mixin is defined.