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

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

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

mix($color1, $color2, $weight:50%) Mixes two colors together. Specifically, takes the average of each of the RGB components, optionally weighted by the given percentage. The opacity of the colors is also considered when weighting the components. The weight specifies the amount of the first color that should be included in the returned color. The default, 50%, means that half the first color and half the second color should be used. 25% means that a quarter of the first color and three quarter

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 {