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!

Like this cheat sheet? Check out our sponsors!

Readability-Score.com is a collection of tools to make your writing better. More readabile content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

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
          SASS::Script Cheat Sheet
          Sublime Text 3 (german) Keyboard Shortcuts