Show Menu
Cheatography
  1. Home >
  2. Programming >

SASS::Script Cheat Sheet by

List of sass script functions

Data types

numbers
e.g. 1.2, 13, 10px
strings of text, with and without quotes
e.g. "­foo­", 'bar', baz
colors
e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)
booleans
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

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.
str-in­ser­t($­string, $insert, $index)
Inserts $insert into $string at $index.
str-in­dex­($s­tring, $subst­ring)
Returns the index of the first occurance of $substring in $string.
str-sl­ice­($s­tring, $start-at, [$end-at])
Extracts a substring from $string.
to-upp­er-­cas­e($­string)
Converts a string to upper case.
to-low­er-­cas­e($­string)
Converts a string to lower case.

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.
 

Maps::­fun­ctions

map-ge­t($map, $key)
Returns the value in a map associated with a given key.
map-me­rge­($map1, $map2)
Merges two maps together into a new map.
map-re­mov­e($map, $keys…)
Returns a new map with keys removed.
map-ke­ys(­$map)
Returns a list of all keys in a map.
map-va­lue­s($map)
Returns a list of all values in a map.
map-ha­s-k­ey(­$map, $key)
Returns whether a map has a value associated with a given key.
keywor­ds(­$args)
Returns the keywords passed to a function that takes variable arguments.

List : Functions

length­($list)
Returns the length of a list.
nth($list, $n)
Returns a specific item in a list.
join($­list1, $list2, [$sepa­rator])
Joins together two lists into one.
append­($l­ist1, $val, [$sepa­rator])
Appends a single value onto the end of a list.
zip($l­ists…)
Combines several lists into a single multid­ime­nsional list.
index(­$list, $value)
Returns the position of a value within a list.
list-s­epa­rat­or(­#list)
Returns the separator of a list.

Misc :: 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.

Sources & Docs

 

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-­app­end­($s­ele­ctors…)
Appends selectors to one another without spaces in between.
select­or-­ext­end­($s­ele­ctor, $extendee, $extender)
Extends $extendee with $extender within $selector.
select­or-­rep­lac­e($­sel­ector, $original, $repla­cement)
Replaces $original with $repla­cement within $selector.
select­or-­uni­fy(­$se­lec­tor1, $selec­tor2)
Unifies two selectors to produce a selector that matches elements matched by both.
is-sup­ers­ele­cto­r($­super, $sub)
Returns whether $super matches all the elements $sub does, and possibly more.
simple­-se­lec­tor­s($­sel­ector)
Returns the simple selectors that comprise a compound selector.
select­or-­par­se(­$se­lector)
Parses a selector into the format returned by &.

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.
           
 

Metadata

  • Languages:
  • Published: 9th January, 2017
  • Rated: 5 stars based on 1 ratings

Comments

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