Functions

In this lesson, we'll be looking at how to write functions in SASS.

We'll cover the following

Definition #

Sass functions can receive arguments and return a single value.

They add an element of programming to writing CSS code, and we can now do math!

The standard math operators +, -, *, /, and % can all be utilized.

Example #

The following function can accept two arguments, $first-number and $second-number. The value that is returned by the function is the sum of the two variables:

@function add-numbers($first-number, $second-number) {
  @return $first-number + $second-number
}

Say we want to replace the value of a padding property with the sum of two separate values.

We would call our function and pass in the arguments like so:

.box1 {
  padding: add-numbers(5px, 10px);
}

The resulting CSS output would be:

.box1 {
  padding: 15px;
}

Try it out below!

Get hands-on with 1200+ tech skills courses.