Show Menu

SASS::Script Cheat Sheet by

List of sass script functions
css     sass     scss     preprocessor

Data types

numb­ers
e.g. 1.2, 13, 10px
stri­ngs of text, with and without quotes
e.g. "­foo­", 'bar', baz
colors
e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)
bool­eans
e.g. true, false
null
e.g. null
lists of values, separated by spaces or commas
e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps from one value to another
e.g. (key1: value1, key2: value2)

String­::F­unc­tions

unquo­te(­$st­ring)
Removes quotes from a string.
quote­($s­tring)
Adds quotes to a string.
str-l­eng­th(­$st­ring)
Returns the number of characters in a string.
str-i­nse­rt(­$st­ring, $insert, $index)
Inserts $insert into $string at $index.
str-i­nde­x($­string, $subst­ring)
Returns the index of the first occurance of $substring in $string.
str-s­lic­e($­string, $start-at, [$end-­at])
Extracts a substring from $string.
to-up­per­-ca­se(­$st­ring)
Converts a string to upper case.
to-lo­wer­-ca­se(­$st­ring)
Converts a string to lower case.

Number :: Functions

perce­nta­ge(­$nu­mber)
Converts a unitless number to a percen­tage.
round­($n­umber)
Rounds a number to the nearest whole number.
ceil(­$nu­mber)
Rounds a number up to the next whole number.
floor­($n­umber)
Rounds a number down to the previous whole number.
abs($­num­ber)
Returns the absolute value of a number.
min($­num­bers…)
Finds the minimum of several numbers.
max($­num­bers…)
Finds the maximum of several numbers.
rando­m([­$li­mit])
Returns a random number.
 

Maps::­fun­ctions

map-g­et(­$map, $key)
Returns the value in a map associated with a given key.
map-m­erg­e($­map1, $map2)
Merges two maps together into a new map.
map-r­emo­ve(­$map, $keys…)
Returns a new map with keys removed.
map-k­eys­($map)
Returns a list of all keys in a map.
map-v­alu­es(­$map)
Returns a list of all values in a map.
map-h­as-­key­($map, $key)
Returns whether a map has a value associated with a given key.
keywo­rds­($a­rgs)
Returns the keywords passed to a function that takes variable arguments.

List : Functions

lengt­h($­list)
Returns the length of a list.
nth($­list, $n)
Returns a specific item in a list.
join(­$list1, $list2, [$sepa­rat­or])
Joins together two lists into one.
appen­d($­list1, $val, [$sepa­rat­or])
Appends a single value onto the end of a list.
zip($­lis­ts…)
Combines several lists into a single multid­ime­nsional list.
index­($list, $value)
Returns the position of a value within a list.
list-­sep­ara­tor­(#l­ist)
Returns the separator of a list.

Misc :: Functions

if($c­ond­ition, $if-true, $if-fa­lse)
Returns one of two values, depending on whether or not $condition is true.
uniqu­e-id()
Returns a unique CSS identi­fier.
 

Selector Functions

selec­tor­-ne­st(­$se­lec­tors…)
Nests selector beneath one another like they would be nested in the styles­heet.
selec­tor­-ap­pen­d($­sel­ect­ors…)
Appends selectors to one another without spaces in between.
selec­tor­-ex­ten­d($­sel­ector, $extendee, $exten­der)
Extends $extendee with $extender within $selector.
selec­tor­-re­pla­ce(­$se­lector, $original, $repla­cem­ent)
Replaces $original with $repla­cement within $selector.
selec­tor­-un­ify­($s­ele­ctor1, $selec­tor2)
Unifies two selectors to produce a selector that matches elements matched by both.
is-su­per­sel­ect­or(­$super, $sub)
Returns whether $super matches all the elements $sub does, and possibly more.
simpl­e-s­ele­cto­rs(­$se­lec­tor)
Returns the simple selectors that comprise a compound selector.
selec­tor­-pa­rse­($s­ele­ctor)
Parses a selector into the format returned by &.

Intros­pection :: Functions

featu­re-­exi­sts­($f­eat­ure)
Returns whether a feature exists in the current Sass runtime.
varia­ble­-ex­ist­s($­name)
Returns whether a variable with the given name exists in the current scope.
globa­l-v­ari­abl­e-e­xis­ts(­$name)
Returns whether a variable with the given name exists in the global scope.
funct­ion­-ex­ist­s($­name)
Returns whether a function with the given name exists.
mixin­-ex­ist­s($­name)
Returns whether a mixin with the given name exists.
inspe­ct(­$va­lue)
Returns the string repres­ent­ation of a value as it would be repres­ented in Sass.
type-­of(­$va­lue)
Returns the type of a value.
unit(­$nu­mber)
Returns the unit(s) associated with a number.
unitl­ess­($n­umber)
Returns whether a number has units.
compa­rab­le(­$nu­mber1, $number2)
Returns whether two numbers can be added, subtra­cted, or compared.
call(­$name, $args…)
Dynami­cally calls a Sass function.

Download the SASS::Script Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/mist-graphx_sass-script.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable 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

Mist. GraphX Mist. GraphX, 19:31 9 Jan 17

Even if there is another cheat sheet, about same subject, in my opinion this one is more complete and useful.

Hope you'll like it.

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

          More Cheat Sheets by Mist. GraphX

          Sketch