Skip to content

Instantly share code, notes, and snippets.

@ispmdev
Forked from AllThingsSmitty/sass-functions.md
Created December 9, 2019 17:57
Show Gist options
  • Save ispmdev/d585f346332e9534c1238a84e4c67054 to your computer and use it in GitHub Desktop.
Save ispmdev/d585f346332e9534c1238a84e4c67054 to your computer and use it in GitHub Desktop.

Revisions

  1. @AllThingsSmitty AllThingsSmitty revised this gist Apr 2, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion sass-functions.md
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@

    ####RGB Functions

    **`rgb(­$red, $green, $blue)`**
    [**`rgb(­$red, $green, $blue)`**](http://sass-lang.com/documentation/Sass/Script/Functions.html#rgb-instance_method)
    Creates a color from red, green, and blue values.

    **`rgba­($red, $green, $blue, $alpha)`**
  2. @AllThingsSmitty AllThingsSmitty revised this gist Feb 27, 2015. No changes.
  3. @AllThingsSmitty AllThingsSmitty created this gist Feb 25, 2015.
    202 changes: 202 additions & 0 deletions sass-functions.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,202 @@
    ##Sass Functions Cheat Sheet

    1. [RGB Functions](#rgb-functions)
    1. [HSL Functions](#hsl-functions)
    1. [Opacity Functions](#opacity-functions)
    1. [Other Color Functions](#other-color-functions)
    1. [List Functions](#list-functions)
    1. [Map Functions](#map-functions)
    1. [Selector Functions](#selector-functions)
    1. [String Functions](#string-functions)
    1. [Number Functions](#number-functions)
    1. [Introspection Functions](#introspection-functions)
    1. [Miscel­laneous Functions](#miscellaneous-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(­$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

    Visit [Sass Functions](http://sass-lang.com/documentation/Sass/Script/Functions.html).

    ==========
    ####List Functions

    Visit [Sass Functions](http://sass-lang.com/documentation/Sass/Script/Functions.html).

    ==========
    ####Map Functions

    Visit [Sass Functions](http://sass-lang.com/documentation/Sass/Script/Functions.html).

    ==========
    ####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`.

    More at [Sass Functions](http://sass-lang.com/documentation/Sass/Script/Functions.html).

    ==========
    ####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.

    More at [Sass Functions](http://sass-lang.com/documentation/Sass/Script/Functions.html).

    ==========
    ####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.

    ==========
    ####Introspection 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.