Functions and Operations

Learn to use Sass functions, loops, and conditions to style different components of a webpage.

Start

Lesson 1 of 1

1
Functions in SCSS
Functions and operations in Sass allow for computing and iterating on styles. With Sass functions you can: + Operate on color values + Iterate on lists and maps + Apply styles based on con…
Start
2
Arithmetic and Color
As mentioned, Sass specifically comes equipped with functions that make working with colors easier. The alpha parameter in a color like RGBA or HSLA is a mask denoting opacity. It specifies how…
Start
3
Color Functions
Sass also allows us to perform mathematical functions to compute measurements— including colors. Here is how Sass computes colors: 1. The operation is performed on the red, green, and blue …
Start
4
Arithmetic
The Sass arithmetic operations are: 1. addition + 2. subtraction - 3. multiplication * 4. division /, and 5. modulo %. Note: Modulo, or %, is the remainder in a given division, so “9%2” wou…
Start
5
Division Can Be Special
In CSS the / character can be used as a separator. In Sass, the character is also used in division. Here are the specific instances / counts as division: 1. If the value, or any part of it, is…
Start
6
Each Loops
Beyond the simple math and color transformations we explored in the previous exercises, Sass also allows for more complex functions. Each loops in Sass iterate on each of the values on a list. T…
Start
7
For Loops
For loops in Sass can be used to style numerous elements or assigning properties all at once. They work like any for-loop you’ve seen before. Sass’s for loop syntax is as follows: @for $i from …
Start
8
Conditionals
In Sass, if() is a function that can only branch one of two ways based on a condition. You can use it inline, to assign the value of a property: width: if( $condition, $value-if-true, $value-if-fal…
Start
9
Generalizations
* Functions in Sass allow for an easier way to style pages, work with colors, and iterate on DOM elements. * Having both for loops and each loops gives the programmer different formats…
Start