Functions and Operations

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

Start[missing "en.views.course_landing_page.learn-sass.course_illustration" translation]
Functions and Operations
Lesson 1 of 1
  1. 1

    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...

  2. 2

    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...

  3. 3

    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 ...

  4. 4

    The Sass arithmetic operations are: 1. addition [...] 2. subtraction [...] 3. multiplication [...] 4. division [...] , and 5. modulo [...] . Note: Modulo, or [...] , is the remaind...

  5. 5

    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 pa...

  6. 6

    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...

  7. 7

    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: [...] In t...

  8. 8

    In Sass, [...] 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: [...] For cases with more than two outcomes, t...

  9. 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

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

Functions and Operations

Start[missing "en.views.course_landing_page.learn-sass.course_illustration" translation]