Skip to content

Instantly share code, notes, and snippets.

@r-i-c-h
Last active May 19, 2020 06:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save r-i-c-h/95a09a15b789ffd7928b1743456af076 to your computer and use it in GitHub Desktop.
Save r-i-c-h/95a09a15b789ffd7928b1743456af076 to your computer and use it in GitHub Desktop.
SASS Functions

##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.

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