RGB Functionsrgb($red, $green, $blue) | Creates a Color from red, green, and blue values. | rgba($red, $green, $blue, $alpha) | Creates a Color from red, green, blue, and alpha values. | 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($color1, $color2, [$weight]) | Mixes two colors together. |
HSL Functionshsl($hue, $saturation, $lightness) | Creates a Color from hue, saturation, and lightness values. | hsla($hue, $saturation, $lightness, $alpha) | Creates a Color from hue, saturation, lightness, and alpha values. | 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 Functionsalpha($color) / opacity($color) | Gets the alpha component (opacity) of a color. | rgba($color, $alpha) | Changes the alpha component for a color. | opacify($color, $amount) / fade-in($color, $amount) | Makes a color more opaque. | **transparentize($color, $amount) / fade-out($color, $amount) | Makes a color more transparent. |
Selector Functionsselector-nest($selectors…) | Nests selector beneath one another like they would be nested in the stylesheet. | selector-replace($selector, $original, $replacement) | Replaces $original with $replacement within $selector. |
| | String Functionsunquote($string) | Removes quotes from a string. | quote($string) | Adds quotes to a string. | str-length($string) | Returns the number of characters in a string. |
Number Functionspercentage($number) | Converts a unitless number to a percentage. | round($number) | Rounds a number to the nearest whole number. | ceil($number) | Rounds a number up to the next whole number. | floor($number) | Rounds a number down to the previous whole number. | abs($number) | Returns the absolute value of a number. | min($numbers…) | Finds the minimum of several numbers. | max($numbers…) | Finds the maximum of several numbers. | random([$limit]) | Returns a random number. |
Introspection Functionsfeature-exists($feature) | Returns whether a feature exists in the current Sass runtime. | variable-exists($name) | Returns whether a variable with the given name exists in the current scope. | global-variable-exists($name) | Returns whether a variable with the given name exists in the global scope. | function-exists($name) | Returns whether a function with the given name exists. | mixin-exists($name) | Returns whether a mixin with the given name exists. | inspect($value) | Returns the string representation of a value as it would be represented in Sass. | type-of($value) | Returns the type of a value. | unit($number) | Returns the unit(s) associated with a number. | unitless($number) | Returns whether a number has units. | comparable($number1, $number2) | Returns whether two numbers can be added, subtracted, or compared. | call($name, $args…) | Dynamically calls a Sass function. |
Miscellaneous Functionsif($condition, $if-true, $if-false) | Returns one of two values, depending on whether or not $condition is true. | unique-id() | Returns a unique CSS identifier. |
Cheat Sheet Info:Title: Sass Functions Cheat Sheet
Design by: Hamid Yaftian
Email: hamid.yaftian@outlook.com
Source: Sass-Lang.com Docs
Date Created: 2015/02/24 |
|
Created By
Metadata
Favourited By
Comments
Great cheat sheet! One of your fans on Twitter pointed out you've got a few broken links though - the "More at Sass Functions" links are missing a colon after the "http".
Add a Comment
Related Cheat Sheets