@warn The @warn directive prints the value of a SassScript expression to the standard error output stream. It’s useful for libraries that need to warn users of deprecations or recovering from minor mixin usage mistakes. There are two major distinctions between @warn and @debug: You can turn warnings off with the --quiet command-line option or the :quiet Sass option. A stylesheet trace will be printed out along with the message so that the user being warned can see where their styles caused the

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

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

counter($args...) This function only exists as a workaround for IE7‘s content: counter bug. It works identically to any other plain-CSS function, except it avoids adding spaces between the argument commas. Examples: counter(item, ".") => counter(item,".") Returns: (String)

hsl($hue, $saturation, $lightness) Creates a Color from hue, saturation, and lightness values. Uses the algorithm from the CSS3 spec. Parameters: $hue (Number) — The hue of the color. Should be between 0 and 360 degrees, inclusive $saturation (Number) — The saturation of the color. Must be between 0% and 100%, inclusive $lightness (Number) — The lightness of the color. Must be between 0% and 100%, inclusive Returns: (Color) Raises: (ArgumentError) — if $saturation or $l

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

@debug The @debug directive prints the value of a SassScript expression to the standard error output stream. It’s useful for debugging Sass files that have complicated SassScript going on. For example: @debug 10em + 12em; outputs: Line 1 DEBUG: 22em

ie_hex_str($color) Converts a color into the format understood by IE filters. Examples: ie-hex-str(#abc) => #FFAABBCC ie-hex-str(#3322BB) => #FF3322BB ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00 Parameters: $color (Color) Returns: (String) — The IE-formatted string representation of the color Raises: (ArgumentError) — if $color isn’t a color

:compact Compact style takes up less space than Nested or Expanded. It also draws the focus more to the selectors than to their properties. Each CSS rule takes up only one line, with every property defined on that line. Nested rules are placed next to each other with no newline, while separate groups of rules have newlines between them. For example: #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

@import Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file. Sass looks for other Sass files in the current directory, and the Sass file directory under Rack, Rails, or Merb. Additional search directories may be specified using the :load_paths option, or the --load-path option on the command