Functions and Operations
Lesson 1 of 1
  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. 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. 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. 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. 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. 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. 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. 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. 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

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