Functions and Operations
Learn to use Sass functions, loops, and conditions to style different components of a webpage.
Start
Functions and Operations
Lesson 1 of 1
- 1Functions 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…
- 2As 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…
- 3Sass 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 …
- 4The 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…
- 5In 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…
- 6Beyond 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…
- 8In 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…
- 9* 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory