Using Built-in SASS/SCSS Functions

1. Introduction

Goal

This tutorial aims to help you understand and utilize the built-in functions of SASS/SCSS, a powerful CSS preprocessor.

Learning Outcomes

By the end of this tutorial, you will be able to:
- Understand the basic concepts of SASS/SCSS
- Use different built-in SASS/SCSS functions
- Apply the functions to practical coding situations

Prerequisites

A basic understanding of CSS is required. Familiarity with SASS/SCSS is useful, but not necessary.

2. Step-by-Step Guide

SASS/SCSS comes with several built-in functions, primarily for color manipulation, list/map manipulation, and mathematical operations.

Color Functions

• lighten($color, $percentage): This function makes a color lighter by the given percentage
• darken($color, $percentage): This function makes a color darker by the given percentage

List/Map Functions

• nth($list, $n): This function gets the nth item in a list
• map-get($map, $key): This function retrieves the value associated with a specific key from a map

Math Functions

• percentage($number): This function converts a number to a percentage
• round($number): This function rounds a number to the nearest whole number

3. Code Examples

Example 1: Color Functions

$primary-color: #3CABFA;

.lighten-class {
  background-color: lighten($primary-color, 20%); // Makes the primary color 20% lighter
}

.darken-class {
  background-color: darken($primary-color, 20%); // Makes the primary color 20% darker
}

Example 2: List/Map Functions

$list: 'apple', 'banana', 'cherry';

.map-class {
  content: nth($list, 2); // Outputs 'banana'
}

$map: (font-size: 14px, padding: 10px);

.map-get-class {
  font-size: map-get($map, font-size); // Outputs 14px
}

Example 3: Math Functions

.number-class {
  width: percentage(0.5); // Outputs 50%
  padding: round(15.7px); // Outputs 16px
}

4. Summary

In this tutorial, we've covered the basics of built-in SASS/SCSS functions, including color functions, list/map functions, and mathematical functions.

As next steps, try experimenting with these functions in your CSS files, and look up more SASS/SCSS functions to broaden your toolkit. You can find additional resources at the official SASS documentation.

5. Practice Exercises

Exercise 1:

Use the lighten and darken functions to create two classes, .lighten-red and .darken-red, that lighten and darken the color red by 10%, respectively.

Solution:

$red: #ff0000;

.lighten-red {
  color: lighten($red, 10%);
}

.darken-red {
  color: darken($red, 10%);
}

Exercise 2:

Create a list of five colors. Use the nth function to set the background color of a class .nth-color to the third color in the list.

Solution:

$colors: 'red', 'green', 'blue', 'yellow', 'black';

.nth-color {
  background-color: nth($colors, 3); // Outputs 'blue'
}

Exercise 3:

Create a map of font properties and values. Use the map-get function to set the properties of a class .map-get-font.

Solution:

$font-map: (font-family: Arial, font-size: 16px, line-height: 1.5);

.map-get-font {
  font-family: map-get($font-map, font-family); // Outputs Arial
  font-size: map-get($font-map, font-size); // Outputs 16px
  line-height: map-get($font-map, line-height); // Outputs 1.5
}

Remember, practice makes perfect. Keep exploring more functions and applying them to your code. Happy coding!