desaturate($color, $amount) Makes a color less saturated. Takes a color and a number between 0% and 100%, and returns a color with the saturation decreased by that value. Examples: desaturate(hsl(120, 30%, 90%), 20%) => hsl(120, 10%, 90%) desaturate(#855, 20%) => #726b6b Parameters: $color (Color) $amount (Number) — The amount to decrease the saturation by, between 0% and 100% Returns: (Color) Raises: (ArgumentError) — if $amount is out of bounds, or either parameter

@error The @error directive throws the value of a SassScript expression as a fatal error, including a nice stack trace. It’s useful for validating arguments to mixins and functions. For example: @mixin adjust-location($x, $y) { @if unitless($x) { @error "$x may not be unitless, was #{$x}."; } @if unitless($y) { @error "$y may not be unitless, was #{$y}."; } position: relative; left: $x; top: $y; } There is currently no way to catch errors.

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

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

ceil($number) Rounds a number up to the next whole number. Examples: ceil(10.4px) => 11px ceil(10.6px) => 11px Parameters: $number (Number) Returns: (Number) Raises: (ArgumentError) — if $number isn’t a number

@if The @if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null: p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } } is compiled to: p { border: 1px solid; } The @if statement can be followed by several @else if statements and one @else statement. If the @if statement fails, the @else if statements are tried in order until one s

:compressed Compressed style takes up the minimum amount of space possible, having no whitespace except that necessary to separate selectors and a newline at the end of the file. It also includes some other minor compressions, such as choosing the smallest representation for colors. It’s not meant to be human-readable. For example: #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

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

@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)

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