Show Menu

Sass Functions Cheat Sheet by

Module: Sass::Script::Functions
css     function     module     sass     scss

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

List Functions

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

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.

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.

Intros­pection 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.

Cheat Sheet Info:

Title: Sass Functions Cheat Sheet
Design by: Hamid Yaftian
Email: hami­d.y­aft­ian­@ou­tlo­ok.c­om
Source: Sass-Lang.com Docs
Date Created: 2015­/02­/24

Download the Sass Functions Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/hamidyfine_sass-functions.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

DaveChild DaveChild, 09:14 8 Nov 16

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

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Bourbon Neat Cheat Sheet
          Sublime Text 3 (german) Keyboard Shortcuts
          SASS::Script Cheat Sheet