Using Operators for Math in SASS/SCSS

1. Introduction

This tutorial will guide you through the process of using mathematical operators in SASS/SCSS. SASS/SCSS, which is a CSS preprocessor, allows you to use mathematical operations in your stylesheets, which is something that is not possible with regular CSS.

By the end of this tutorial, you would have learned how to perform basic arithmetic operations such as addition, subtraction, multiplication, and division in SASS/SCSS.

Prerequisites: Basic understanding of CSS and SASS/SCSS.

2. Step-by-Step Guide

SASS/SCSS supports the following mathematical operators:
- Addition (+)
- Subtraction (-)
- Multiplication (*)
- Division (/)
- Modulo (%)

When using these operators, it is important to remember that SASS/SCSS performs operations only on compatible units, such as those of the same type (for example, two lengths or two times) or numbers without units.

3. Code Examples

Addition and Subtraction

$base: 10px;
$padding: 5px;

div {
  width: $base + $padding; // 15px
  height: $base - $padding; // 5px
}

In the above example, we have two variables $base and $padding. We're adding and subtracting these variables to get the width and height of a div.

Multiplication and Division

$base: 10px;
$multiplier: 2;

div {
  width: $base * $multiplier; // 20px
  height: $base / $multiplier; // 5px
}

Here, we're multiplying and dividing the $base variable with the $multiplier to get the width and height of a div.

Modulo

$base: 10;
$divider: 3;

div {
  margin-left: $base % $divider; // 1px
}

In this example, we're using the modulo operator to find the remainder of the division operation.

4. Summary

In this tutorial, we have learned how to use mathematical operators in SASS/SCSS. This can be very useful in creating dynamic and responsive layouts.

Moving forward, you can explore more complex calculations and operations in SASS/SCSS. For additional learning, you can check the official SASS documentation here.

5. Practice Exercises

1. Create a .scss file and declare a variable $base with a value of 15px. Use the variable to set the width of a div to $base + 5px and the height to $base - 5px.

2. Declare two variables $base and $multiplier with values of 20px and 3, respectively. Use these variables to set the width of a div to $base * $multiplier and the height to $base / $multiplier.

3. Declare two variables $base and $divider with values of 30 and 7, respectively. Use these variables to set the margin-left of a div to $base % $divider.

Solutions

$base: 15px;

div {
  width: $base + 5px; // 20px
  height: $base - 5px; // 10px
}

$base: 20px;
$multiplier: 3;

div {
  width: $base * $multiplier; // 60px
  height: $base / $multiplier; // approximately 6.66667px
}

$base: 30;
$divider: 7;

div {
  margin-left: $base % $divider; // 2px
}

Keep practicing until you're comfortable with these operators and can use them in real-world projects. Good luck!