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

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 Nested style is the default Sass style, because it reflects the structure of the CSS styles and the HTML document they’re styling. Each property has its own line, but the indentation isn’t constant. Each rule is indented based on how deeply it’s nested. For example: #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } Nested style is very useful when looking at large CSS files:

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

unquote($string) Removes quotes from a string. If the string is already unquoted, this will return it unmodified. Examples: unquote("foo") => foo unquote(foo) => foo Parameters: $string (String) Returns: (String) Raises: (ArgumentError) — if $string isn’t a string

@extend There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML. For example, suppose we have a design for a normal error and also for a serious error. We might write our markup like so: <div class="error seriousError"> Oh no! You've been hacked! </div> And our styles like so: .error

zip($lists...) Combines several lists into a single multidimensional list. The nth value of the resulting list is a space separated list of the source lists’ nth values. The length of the resulting list is the length of the shortest list. Examples: zip(1px 1px 3px, solid dashed solid, red green blue) => 1px solid red, 1px dashed green, 3px solid blue Parameters: $lists ([Base]) Returns: (List)

hue($color) Returns the hue component of a color. See the CSS3 HSL specification. Calculated from RGB where necessary via this algorithm. Parameters: $color (Color) Returns: (Number) — The hue component, between 0deg and 360deg Raises: (ArgumentError) — if $color isn’t a color

join($list1, $list2, $separator:auto) Joins together two lists into one. Unless $separator is passed, if one list is comma-separated and one is space-separated, the first parameter’s separator is used for the resulting list. If both lists have fewer than two items, spaces are used for the resulting list. Like all list functions, join() returns a new list rather than modifying its arguments in place. Examples: join(10px 20px, 30px 40px) => 10px 20px 30px 40px join((blue, red), (#abc, #def

floor($number) Rounds a number down to the previous whole number. Examples: floor(10.4px) => 10px floor(10.6px) => 10px Parameters: $number (Number) Returns: (Number) Raises: (ArgumentError) — if $number isn’t a number