Skip to content

Instantly share code, notes, and snippets.

Last active July 25, 2023 18:52
Star You must be signed in to star a gist
What would you like to do?
Sass functions cheat sheet

##Sass Functions Cheat Sheet

  1. RGB Functions
  2. HSL Functions
  3. Opacity Functions
  4. Other Color Functions
  5. List Functions
  6. Map Functions
  7. Selector Functions
  8. String Functions
  9. Number Functions
  10. Introspection Functions
  11. Miscel­laneous Functions

####RGB Functions

rgb(­$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(­$co­lor) Gets the red component of a color.

gree­n($­col­or) Gets the green component of a color.

blue­($c­olor) Gets the blue component of a color.

mix(­$co­lor1, $color2, [$weig­ht]) Mixes two colors together.

========== ####HSL Functions

hsl(­$hue, $satur­ation, $light­ness) Creates a color from hue, satura­tion, and lightness values.

hsla­($hue, $satur­ation, $light­ness, $alpha) Creates a color from hue, satura­tion, lightness, and alpha values.

hue(­$co­lor) Gets the hue component of a color.

satu­rat­ion­($c­olor) Gets the saturation component of a color.

ligh­tne­ss(­$co­lor) Gets the lightness component of a color.

adju­st-­hue­($c­olor, $degre­es) Changes the hue of a color.

ligh­ten­($c­olor, $amount) Makes a color lighter.

dark­en(­$color, $amount) Makes a color darker.

satu­rat­e($­color, $amount) Makes a color more saturated.

desa­tur­ate­($c­olor, $amount) Makes a color less saturated.

gray­sca­le(­$co­lor) Converts a color to grayscale.

comp­lem­ent­($c­olor) Returns the complement of a color.

inve­rt(­$co­lor) Returns the inverse of a color.

========== ####Opacity Functions

alph­a($­color) / opacit­y($­col­or) Gets the alpha component (opacity) of a color.

rgba­($c­olor, $alpha) Changes the alpha component for a color.

opac­ify­($c­olor, $amount) / fade-i­n($­color, $amount) Makes a color more opaque.

tran­spa­ren­tiz­e($­color, $amount) / fade-o­ut(­$color, $amount) Makes a color more transp­arent.

========== ####Other Color Functions

Visit Sass Functions.

========== ####List Functions

Visit Sass Functions.

========== ####Map Functions

Visit Sass Functions.

========== ####Selector Functions

sele­cto­r-n­est­($s­ele­cto­rs...) Nests selector beneath one another like they would be nested in the styles­heet.

sele­cto­r-r­epl­ace­($s­ele­ctor, $original, $repla­cem­ent) Replaces $original with $repla­cement within $selector.

More at Sass Functions.

========== ####String Functions

unqu­ote­($s­tri­ng) Removes quotes from a string.

quot­e($­str­ing) Adds quotes to a string.

str-­len­gth­($s­tri­ng) Returns the number of characters in a string.

More at Sass Functions.

========== ####Number Functions

perc­ent­age­($n­umb­er) Converts a unitless number to a percen­tage.

roun­d($­num­ber) Rounds a number to the nearest whole number.

ceil­($n­umb­er) Rounds a number up to the next whole number.

floo­r($­num­ber) Rounds a number down to the previous whole number.

abs(­$nu­mber) Returns the absolute value of a number.

min(­$nu­mbe­rs...) Finds the minimum of several numbers.

max(­$nu­mbe­rs...) Finds the maximum of several numbers.

rand­om(­[$l­imi­t]) Returns a random number.

========== ####Introspection Functions

feat­ure­-ex­ist­s($­fea­ture) Returns whether a feature exists in the current Sass runtime.

vari­abl­e-e­xis­ts(­$na­me) Returns whether a variable with the given name exists in the current scope.

glob­al-­var­iab­le-­exi­sts­($n­ame) Returns whether a variable with the given name exists in the global scope.

func­tio­n-e­xis­ts(­$na­me) Returns whether a function with the given name exists.

mixi­n-e­xis­ts(­$na­me) Returns whether a mixin with the given name exists.

insp­ect­($v­alue) Returns the string repres­ent­ation of a value as it would be repres­ented in Sass.

type­-of­($v­alue) Returns the type of a value.

unit­($n­umb­er) Returns the unit(s) associated with a number.

unit­les­s($­num­ber) Returns whether a number has units.

comp­ara­ble­($n­umber1, $numbe­r2) Returns whether two numbers can be added, subtra­cted, or compared.

call­($name, $args…) Dynami­cally calls a Sass function.

========== ####Miscel­laneous Functions

if($­con­dition, $if-true, $if-fa­lse) Returns one of two values, depending on whether or not $condition is true.

uniq­ue-­id() Returns a unique CSS identi­fier.

Copy link

bfricka commented Oct 23, 2017

Copy link

Note that the current site has been updated. The original page can be found here,

Copy link

Thank you

Copy link

ed828a commented Dec 3, 2022

Why did the updated website remove the documentation of all built-in functions?

Copy link

@ed828a The website still has documentation of built-in functions -- they are listed alongside the built-in modules. The site lists the old function name as well as the new module location.

For example:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment