rgb

rgb($red, $green, $blue) Creates a Color object from red, green, and blue values. Parameters: $red (Number) — The amount of red in the color. Must be between 0 and 255 inclusive, or between 0% and 100% inclusive $green (Number) — The amount of green in the color. Must be between 0 and 255 inclusive, or between 0% and 100% inclusive $blue (Number) — The amount of blue in the color. Must be between 0 and 255 inclusive, or between 0% and 100% inclusive Returns: (Color) Raise

@function

Function Directives It is possible to define your own functions in sass and use them in any value or script context. For example: $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } Becomes: #sidebar { width: 240px; } As you can see functions can access any globally defined variables as well as accept arguments just like a mixin. A function may have several statements contained within

rgba

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

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)

lighten

lighten($color, $amount) Makes a color lighter. Takes a color and a number between 0% and 100%, and returns a color with the lightness increased by that amount. Examples: lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30) lighten(#800, 20%) => #e00 Parameters: $color (Color) $amount (Number) — The amount to increase the lightness by, between 0% and 100% Returns: (Color) Raises: (ArgumentError) — if $amount is out of bounds, or either parameter is the wrong type

ie_hex_str

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

desaturate

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

@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

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

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