Manipulating Colors with SASS/SCSS Functions

1. Introduction

In this tutorial, we will explore the color manipulation functions provided by SASS/SCSS, a preprocessor scripting language that is interpreted or compiled into CSS.

You will learn how to:
- Darken and lighten colors
- Mix colors
- Adjust colors

Prerequisites: Basic understanding of CSS and SASS/SCSS is required.

2. Step-by-Step Guide

In SASS, we can use in-built functions to manipulate colors. These functions include lighten(), darken(), mix(), and adjust() among others.

Lighten Function: This function makes a color lighter.

.lighten {
  background: lighten(red, 20%);
}

Here we are making the red color 20% lighter.

Darken Function: This function makes a color darker.

.darken {
  background: darken(blue, 30%);
}

In the above example, we are making the blue color 30% darker.

Mix Function: This function allows you to mix two colors.

.mix {
  background: mix(red, blue, 50%);
}

Here, red and blue colors are mixed evenly because we set the weight to 50%.

Adjust Function: This function lets you increase or decrease one or more components of a color.

.adjust {
  background: adjust-color($color: #b37399, $red: 20, $blue: -30, $green: 50);
}

In the above example, we're adjusting the color #b37399 by increasing red by 20, decreasing blue by 30, and increasing green by 50.

3. Code Examples

Example 1:

$color: #b37399;

.darken {
  background: darken($color, 20%);
  // This will darken the color #b37399 by 20%
}

.lighten {
  background: lighten($color, 30%);
  // This will lighten the color #b37399 by 30%
}

.mix {
  background: mix($color, red, 50%);
  // This will mix the color #b37399 and red evenly
}

.adjust {
  background: adjust-color($color: $color, $red: -10, $blue: 20, $green: 30);
  // This will adjust the color #b37399 by decreasing red by 10, increasing blue by 20 and increasing green by 30
}

4. Summary

In this tutorial, we've covered how to use SASS/SCSS to manipulate colors. We've learned how to darken, lighten, mix, and adjust colors.

To continue learning about SASS/SCSS, you can explore more about other SASS/SCSS functions and how they can be used.

5. Practice Exercises

1. Create a class to darken the color #b37399 by 50%.
2. Create a class to mix the color red and blue with the weight of red being 30%.
3. Create a class to adjust the color #b37399 by increasing blue by 40 and decreasing green by 20.

Solutions:

.darken-practice {
  background: darken(#b37399, 50%);
}

.mix-practice {
  background: mix(red, blue, 30%);
}

.adjust-practice {
  background: adjust-color($color: #b37399, $blue: 40, $green: -20);
}

Continue practicing with different color codes and percentages to get a better grasp of these functions. Happy coding!