Sass/SCSS Functions

@function double($value) { # define function
    @return $value * 2;
}
.box {
    width: double(50px); # returns 100px
}

lighten(#3498db, 20%) # lighten color
darken(#3498db, 20%) # darken color
saturate(#3498db, 20%) # increase saturation
desaturate(#3498db, 20%) # decrease saturation
rgba(#3498db, 0.5) # add transparency

percentage(0.5) # 50%
round(2.6) # 3
ceil(2.3) # 3
floor(2.7) # 2
abs(-10) # 10
min(10px, 20px) # 10px
max(10px, 20px) # 20px

to-upper-case('hello') # HELLO
to-lower-case('HELLO') # hello
str-length('hello') # 5

length(10px 20px 30px) # 3
nth(10px 20px 30px, 2) # 20px
append(10px 20px, 30px) # 10px 20px 30px