Sass Functions Cheat Sheet
by hamidyfine via cheatography.com/20655/cs/3376/
RGB Functions HSL Functions (cont)
rgb($red, $green, $blue) invert($color)
Creates a Color from red, green, and blue values. Returns the inverse of a color.
rgba($red, $green, $blue, $alpha)
Opacity Functions
Creates a Color from red, green, blue, and alpha values.
alpha($color) / opacity($color)
red($color)
Gets the alpha component (opacity) of a color.
Gets the red component of a color.
rgba($color, $alpha)
green($color)
Changes the alpha component for a color.
Gets the green component of a color.
opacify($color, $amount) / fade-in($color, $amount)
blue($color)
Makes a color more opaque.
Gets the blue component of a color.
mix($color1, $color2, [$weight]) **transparentize($color, $amount) / fade-out($color, $amount)
Makes a color more transparent.
Mixes two colors together.
Other Color Functions
HSL Functions
Visit: Sass Function
hsl($hue, $saturation, $lightness)
Creates a Color from hue, saturation, and lightness values.
List Functions
hsla($hue, $saturation, $lightness, $alpha)
Visit Sass Functions
Creates a Color from hue, saturation, lightness, and alpha values.
hue($color) Map Functions
Gets the hue component of a color. Visit Sass Functions
saturation($color)
Gets the saturation component of a color. Selector Functions
lightness($color) selector-nest($selectors…)
Gets the lightness component of a color. Nests selector beneath one another like they would be nested in the
stylesheet.
adjust-hue($color, $degrees)
selector-replace($selector, $original, $replacement)
Changes the hue of a color.
Replaces $original with $replacement within $selector.
lighten($color, $amount)
More at Sass Functions
Makes a color lighter.
darken($color, $amount)
String Functions
Makes a color darker.
unquote($string)
saturate($color, $amount)
Removes quotes from a string.
Makes a color more saturated.
quote($string)
desaturate($color, $amount)
Adds quotes to a string.
Makes a color less saturated.
str-length($string)
grayscale($color)
Returns the number of characters in a string.
Converts a color to grayscale.
More at Sass Function
complement($color)
Returns the complement of a color.
By hamidyfine Published 24th February, 2015. Sponsored by CrosswordCheats.com
cheatography.com/hamidyfine/ Last updated 24th February, 2015. Learn to solve cryptic crosswords!
Page 1 of 2. http://crosswordcheats.com
Sass Functions Cheat Sheet
by hamidyfine via cheatography.com/20655/cs/3376/
Number Functions Introspection Functions (cont)
percentage($number) Returns whether a number has units.
Converts a unitless number to a percentage. comparable($number1, $number2)
round($number) Returns whether two numbers can be added, subtracted, or compared.
Rounds a number to the nearest whole number. call($name, $args…)
ceil($number) Dynamically calls a Sass function.
Rounds a number up to the next whole number.
Miscellaneous Functions
floor($number)
if($condition, $if-true, $if-false)
Rounds a number down to the previous whole number.
Returns one of two values, depending on whether or not $condition is
abs($number)
true.
Returns the absolute value of a number.
unique-id()
min($numbers…)
Returns a unique CSS identifier.
Finds the minimum of several numbers.
max($numbers…) Cheat Sheet Info:
Finds the maximum of several numbers. Title: Sass Functions Cheat Sheet
random([$limit]) Design by: Hamid Yaftian
Returns a random number. Email: hamid.yaftian@outlook.com
Source: Sass-Lang.com Docs
Introspection Functions Date Created: 2015/02/24
feature-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)
By hamidyfine Published 24th February, 2015. Sponsored by CrosswordCheats.com
cheatography.com/hamidyfine/ Last updated 24th February, 2015. Learn to solve cryptic crosswords!
Page 2 of 2. http://crosswordcheats.com
