Operators in Sass

Sass allows you to use various mathematical operators such as addition, subtraction, multiplication, division, and modulo. These operators can be very useful, especially when working with variables and performing calculations on values.

Addition (+) and Subtraction (-)

Addition and subtraction work as you would expect. For example:

1.container {
2  width: 800px + 200px; // Result: width: 1000px
3}

Subtraction works similarly:

1.container {
2  width: 1000px - 200px; // Result: width: 800px
3}

Multiplication (*) and Division (/)

Multiplication and division also work as expected:

1.container {
2  width: 300px * 2; // Result: width: 600px
3}

When using the division operator, however, you need to be careful. Sass interprets values with a fraction as shorthand for CSS values, such as font: 16px/24px. To avoid confusion, it is recommended to wrap division operations in parentheses:

1.container {
2  width: (800px / 2); // Result: width: 400px
3}

Modulo (%)

The modulo operator returns the remainder of a division:

1p {
2  margin: (10 % 3); // Result: margin: 1;
3}

Interpolation #{}

Sass also offers interpolation, which is used to insert variable values into selectors, property names, values, and other places that normally don't accept variables. Interpolation is defined using #{}. Example:

1$name: foo;
2$attr: border;
3
4p.#{$name} {
5  #{$attr}-color: blue;
6}

After compiling to CSS, we get:

1p.foo {
2  border-color: blue;
3}

As you can see, operators in Sass provide great flexibility and are very useful for creating more dynamic and configurable CSS.

Exercise: Sass Style Calculator

Your task is to create a stylesheet using Sass that dynamically calculates various CSS values using mathematical operators.

Step 1: Create a Sass File

Create a Sass file named styles.scss.

Step 2: Define Variables

Define the following variables:

1$base-width: 800px;
2$base-height: 600px;
3$padding: 20px;
4$multiplier: 1.5;
5$font-size: 16px;
6$spacing: 10px;
7$primary-color: blue;
8$danger-color: red;

Step 3: Calculations

Use operators to dynamically calculate values:

1. Add 200px to $base-width for the .container class.
2. Subtract 100px from $base-height for the .header class.
3. Multiply $font-size by $multiplier for the .text-large class.
4. Divide $base-width by 2 for the .sidebar class.
5. Use modulo on $spacing by 3 for the .list-item class (set margin).

Step 4: Interpolation

Use interpolation to define a button class with a dynamic background:

1@mixin button($color) {
2  background-color: $color;
3  color: white;
4  padding: $padding;
5  &:hover {
6    background-color: darken($color, 10%);
7  }
8}
9
10.button-primary {
11  @include button($primary-color);
12}
13
14.button-danger {
15  @include button($danger-color);
16}

Step 5: HTML

Add appropriate HTML to test your styles:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Sass Project</title>
7  <link rel="stylesheet" href="css/main.css">
8</head>
9<body>
10  <div class="container">
11    <ul>
12      <li class="list-item">Element 1</li>
13      <li class="list-item">Element 2</li>
14      <li class="list-item">Element 3</li>
15    </ul>
16    <button class="button-primary">Primary Button</button>
17    <button class="button-danger">Danger Button</button>
18  </div>
19  <nav class="sidebar">
20    <ul>
21      <li>Link 1</li>
22      <li>Link 2</li>
23      <li>Link 3</li>
24    </ul>
25  </nav>
26</body>
27</html>

Step 6: Compilation

Compile the Sass file to CSS and make sure all calculations are correctly applied.

Final Result

Make sure your CSS looks similar to the following:

1.container {
2  width: 1000px; /* 800px + 200px */
3}
4
5.header {
6  height: 500px; /* 600px - 100px */
7}
8
9.text-large {
10  font-size: 24px; /* 16px * 1.5 */
11}
12
13.sidebar {
14  width: 400px; /* 800px / 2 */
15}
16
17.list-item {
18  margin: 1px; /* 10px % 3 */
19}
20
21.button-primary {
22  background-color: blue;
23  color: white;
24  padding: 20px;
25}
26.button-primary:hover {
27  background-color: darkblue;
28}
29
30.button-danger {
31  background-color: red;
32  color: white;
33  padding: 20px;
34}
35.button-danger:hover {
36  background-color: darkred;
37}

Good luck!

1<!DOCTYPE html>
2<html lang="en">
3<head><title>Dropdown Lists</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Dropdown Lists</h1>
6<select><option>Ramesses</option><option>Tutankhamun</option></select>
7</body>
8</html>