/ Published in: SASS
A concise reference listing all of the available functions built into Sass.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
###################################################### ## Sass and SCSS Function Reference ## ###################################################### Contents: RGB Functions__________________________________Line 19 HSL Functions__________________________________Line 29 Opacity Functions______________________________Line 45 Other Color Functions__________________________Line 52 String Functions_______________________________Line 63 Number Functions_______________________________Line 68 List Functions_________________________________Line 78 Introspective Functions________________________Line 85 Misc Functions_________________________________Line 92 ###################################################### # Summary based on Official Sass/SCSS Documentation # ###################################################### // RGB FUNCTIONS // rgb($red, $green, $blue) // Converts an rgb(red, green, blue) triplet into a color. rgba($red, $green, $blue, $alpha) // Converts an rgba(red, green, blue, alpha) quadruplet into a color. rgba($color, $alpha) // Adds an alpha layer to any color value. red($color) // Gets the red component of a color. green($color) // Gets the green component of a color. blue($color) // Gets the blue component of a color. mix($color-1, $color-2, [$weight]) // Mixes two colors together. // HSL FUNCTIONS // hsl($hue, $saturation, $lightness) // Converts an hsl(hue, saturation, lightness) triplet into a color. hsla($hue, $saturation, $lightness, $alpha) // Converts an hsla(hue, saturation, lightness, alpha) quadruplet into a color. hue($color) // Gets the hue component of a color. saturation($color) // Gets the saturation component of a color. lightness($color) // Gets the lightness component of a color. adjust-hue($color, $degrees) // Changes the hue of a color. lighten($color, $amount) // Makes a color lighter. darken($color, $amount) // Makes a color darker. saturate($color, $amount) // Makes a color more saturated. desaturate($color, $amount) // Makes a color less saturated. grayscale($color) // Converts a color to grayscale. complement($color) // Returns the complement of a color. invert($color) // Returns the inverse of a color. // OPACITY FUNCTIONS // alpha($color) / opacity($color) // Gets the alpha component (opacity) of a color. rgba($color, $alpha) // Add or change an alpha layer for any color value. opacify($color, $amount) / fade-in($color, $amount) // Makes a color more opaque. transparentize($color, $amount) / fade-out($color, $amount) // Makes a color more transparent. // OTHER COLOR FUNCTIONS // adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) // Increase or decrease any of the components of a color. scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) // Fluidly scale one or more components of a color. change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) // Changes one or more properties of a color. ie-hex-str($color) // Converts a color into the format understood by IE filters. // STRING FUNCTIONS // unquote($string) // Removes the quotes from a string. quote($string) // Adds quotes to a string. // NUMBER FUNCTIONS // percentage($value) // Converts a unitless number to a percentage. round($value) // Rounds a number to the nearest whole number. ceil($value) // Rounds a number up to the nearest whole number. floor($value) // Rounds a number down to the nearest whole number. abs($value) // Returns the absolute value of a number. min($x1, $x2, �) // Finds the minimum of several values. max($x1, $x2, �) // Finds the maximum of several values. // LIST FUNCTIONS // length($list) // Returns the length of a list. nth($list, $n) // Returns a specific item in a list. join($list1, $list2, [$separator]) // Joins together two lists into one. append($list1, $val, [$separator]) // Appends a single value onto the end of a list. // INTROSPECTIVE FUNCTIONS // type-of($value) // Returns the type of a value. unit($number) // Returns the units associated with a number. unitless($number) // Returns whether a number has units or not. comparable($number-1, $number-2) // Returns whether two numbers can be added or compared. // MISC FUNCTIONS // if($condition, $if-true, $if-false) // Returns one of two values, depending on whether or not a condition is true.
URL: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html