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!

 

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

          More Cheat Sheets by Mist. GraphX

          Sketch