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.