Show Menu
Cheatography

Sass Functions Cheat Sheet by

Module: Sass::Script::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($c­olor)
Gets the red component of a color.
green(­$color)
Gets the green component of a color.
blue($­color)
Gets the blue component of a color.
mix($c­olor1, $color2, [$weight])
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($c­olor)
Gets the hue component of a color.
satura­tio­n($­color)
Gets the saturation component of a color.
lightn­ess­($c­olor)
Gets the lightness component of a color.
adjust­-hu­e($­color, $degrees)
Changes the hue of a color.
lighte­n($­color, $amount)
Makes a color lighter.
darken­($c­olor, $amount)
Makes a color darker.
satura­te(­$color, $amount)
Makes a color more saturated.
desatu­rat­e($­color, $amount)
Makes a color less saturated.
graysc­ale­($c­olor)
Converts a color to grayscale.
comple­men­t($­color)
Returns the complement of a color.
invert­($c­olor)
Returns the inverse of a color.

Opacity Functions

alpha(­$color) / opacit­y($­color)
Gets the alpha component (opacity) of a color.
rgba($­color, $alpha)
Changes the alpha component for a color.
opacif­y($­color, $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

select­or-­nes­t($­sel­ect­orsā€¦)
Nests selector beneath one another like they would be nested in the styles­heet.
select­or-­rep­lac­e($­sel­ector, $original, $repla­cement)
Replaces $original with $repla­cement within $selector.
 

String Functions

unquot­e($­string)
Removes quotes from a string.
quote(­$st­ring)
Adds quotes to a string.
str-le­ngt­h($­string)
Returns the number of characters in a string.

Number Functions

percen­tag­e($­number)
Converts a unitless number to a percen­tage.
round(­$nu­mber)
Rounds a number to the nearest whole number.
ceil($­number)
Rounds a number up to the next whole number.
floor(­$nu­mber)
Rounds a number down to the previous whole number.
abs($n­umber)
Returns the absolute value of a number.
min($n­umb­ersā€¦)
Finds the minimum of several numbers.
max($n­umb­ersā€¦)
Finds the maximum of several numbers.
random­([$­limit])
Returns a random number.

Intros­pection Functions

featur­e-e­xis­ts(­$fe­ature)
Returns whether a feature exists in the current Sass runtime.
variab­le-­exi­sts­($name)
Returns whether a variable with the given name exists in the current scope.
global­-va­ria­ble­-ex­ist­s($­name)
Returns whether a variable with the given name exists in the global scope.
functi­on-­exi­sts­($name)
Returns whether a function with the given name exists.
mixin-­exi­sts­($name)
Returns whether a mixin with the given name exists.
inspec­t($­value)
Returns the string repres­ent­ation of a value as it would be repres­ented in Sass.
type-o­f($­value)
Returns the type of a value.
unit($­number)
Returns the unit(s) associated with a number.
unitle­ss(­$nu­mber)
Returns whether a number has units.
compar­abl­e($­num­ber1, $number2)
Returns whether two numbers can be added, subtra­cted, or compared.
call($­name, $argsā€¦)
Dynami­cally calls a Sass function.

Miscel­laneous Functions

if($co­ndi­tion, $if-true, $if-false)
Returns one of two values, depending on whether or not $condition is true.
unique­-id()
Returns a unique CSS identi­fier.

Cheat Sheet Info:

Title: Sass Functions Cheat Sheet
Design by: Hamid Yaftian
Email: hamid.y­af­tia­n@o­utl­ook.com
Source: Sass-L­ang.com Docs
Date Created: 2015/02/24
               
 

Comments

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