(click anywhere to close)

[SASS] Functions

category: Website | course: SASS | difficulty:
1. Returning

When we created mixins, we already learnt how to create our own functions. By simply choosing a name and filling in the variables, we could insert lots of rules in lots of places. Fortunately, our life can become even easier – we don’t even need to create some of the mixins, as SASS has a huge amount of built-in functions!

There are way too much of them to cover here, and you probably won’t ever need most of them, but some of them are too useful to pass up. You can find a list of all functions in the SASS Documentation

As usual, functions are executed with the following syntax:

some-function-name(value1, …, valuen)

Alternatively, if you don’t like to remember the order of the parameters, you can pass the values by keyword:

some-function-name(param: val, …, param: val)

Here’s an example using some of the colour functions, useful for dynamic colour palettes.

$main-colour: #995511;

body {
	background: darken($main-colour, 80%);

h1, h2 {
	color: lighten($main-colour, 40%);

p {
	color: $main-colour;

.logo {
	background: saturate($main-colour, 20%)

.metadata {
	color: desaturate($main-colour, 40%);


Like any proper programming language, you can also create your own functions that don't create any rules, but instead return a value (after some complicated calculations). To do so, use the following syntax:

@function some-function-name(variable1, …, variablen) { stuff @return value; }

As expected, you can use multiple return statements to return different values based on certain conditions. And, once such a statement is executed, the compiler immediately stops going through the function and continues compiling the rest of the stylesheet.

@function mix-text-colour($colour-one, $colour-two) {
  $new-colour: $colour-one + $colour-two;
  @return $new-colour;

p {
	color: mix-text-colour(green, blue);
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk