DEV Community

Sarah Chima
Sarah Chima

Posted on

SASS Operators

The more of Sass features you learn and use, the more you fall in love with Sass. Another awesome feature of Sass is the ability to use arithmetic operators and other operators in many interesting ways. We will discuss all of these in this article. Let's get started right away.

The Assignment Operator

The colon : is the assignment operator. It is used to define and assign values to variables. Here's an example.

    $font-size: 24px;
Enter fullscreen mode Exit fullscreen mode

Arithmetic Operators

These are the normal arithmetic operators we know. They are:

Operator Description
+ Addition
- Subtraction
/ Division
* Multiplication
% Remainder

These operators function the same way as they do in normal arithmetics. However, it is important to note that you cannot perform arithmetic operations on values with different units. We'll use examples to explain this. Let's start with addition + and subtraction-.

Addition and Subtraction
The following are valid operations for addition and subtraction.


   .header-small {
       /*addition*/
       font-size:  24px + 2px; 
       width: 4em + 2; 

       /*subtraction*/        
       height: 12% - 2%;
       margin: 4rem - 1;
   }

Enter fullscreen mode Exit fullscreen mode

This is compiled to


    .box-small {
        /*addition*/
        font-size: 26px;
        width: 6em;

        /*subtraction*/
        height: 10%;
        margin: 3rem; }

Enter fullscreen mode Exit fullscreen mode

Notice that the values either have the same units or one has no unit at all. The value that has a unit should be on the left-hand side of the operator i.e. it should come first. Let's try to use different units and see the result.


    .box-big {
        font-size:  22px + 4em; // Error: Incompatible units: 'em' and 'px'.
        width: 30% - 20px; // Error: Incompatible units: 'px' and '%'.
    }
Enter fullscreen mode Exit fullscreen mode

We'll get errors in both cases. It is also possible to add and subtract colors. Here's an example.

    $primaryColor: #202020;

    .box {
        background-color: $primaryColor + #123456;
        color: $primaryColor - #100110;
    }

Enter fullscreen mode Exit fullscreen mode

This is compiled to

   .box {
       background-color: #325476;
       color: #101f10; }

Enter fullscreen mode Exit fullscreen mode

How does this work? Sass performs operations on each corresponding part of the RGB color code. So in the addition part of our code above, here's what happened.

    20+12=32(red color) 20+34=54(green color) 20+56=76(blue color)
Enter fullscreen mode Exit fullscreen mode

If you add two color values and it's more than the color range, the result will be the last value on the color range which is #FFFFFF. Similarly, if you subtract more than the color range, you'll get #000000. I think Sass is kind enough not to throw an error. :) The + can also be used for concatenation as we'll see soon.

Multiplication
In Sass, the multiplication operator is used in the same way as the addition and subtraction only that one value must not have a unit. So here, the code below results to valid CSS when compiled.


    .box-small {
        height: 16px * 4;
    }
Enter fullscreen mode Exit fullscreen mode

Its CSS is

   .box-small {
       height: 64px; }

Enter fullscreen mode Exit fullscreen mode

While this one results in an error.

    .box-small {
        height: 16px * 4px; //Error: 64px*px isn't a valid CSS value.
    }
Enter fullscreen mode Exit fullscreen mode

Division

If we use the / operator without putting the values in brackets, it is taken as the normal use of the forward slash in CSS and no operation is carried out. Look at the example below.

   .box-medium {
        font-size: 30px / 5px;
        width:  24px/ 4;

    }
Enter fullscreen mode Exit fullscreen mode

This is compiled to


   .box-medium {
       font-size: 30px / 5px;
       width: 24px/ 4; }

Enter fullscreen mode Exit fullscreen mode

No difference because it is taken as normal CSS. So to make SCSS do the calculations, we put our values in brackets.


    .box-medium {
        font-size: (30px / 5px);
        width:  (24px/ 4);

    }
Enter fullscreen mode Exit fullscreen mode

This will compile to

   .box-medium {
       font-size: 6;
       width: 6px; }
Enter fullscreen mode Exit fullscreen mode

The operations are carried out. Note that if you are using the / without putting the values in brackets, you can use different units but when they are in brackets, you can only use similar units or no unit on one value.

The remainder operator is used in the same way as the addition and subtraction operators. Next, let's consider another use of the + operator.

String Operations

The + operator can be used to concatenate strings i.e join two strings together. Some things to note are:

  1. If a string with quotes comes before a string without quotes, the resulting string is quoted.
  2. If a string without quotes comes before a string with quotes, the result is a string without quotes.

Let's use examples to prove this.

   p:before {
       content: "I am a string with" +quotes;
       font: Arial + ", sans-serif";
   }
Enter fullscreen mode Exit fullscreen mode

This is compiled to

   p:before {
       content: "I am a string withquotes";
       font: Arial, sans-serif; }

Enter fullscreen mode Exit fullscreen mode

When used with Mixins, it is quite interesting. Here's an example.

    @mixin introduction($name) {
        &:before {
            content: "I'm a supercool person called " +$name;
        }
    } 

    p {
        @include introduction(Sarah);
    }
Enter fullscreen mode Exit fullscreen mode

This is compiled to

   p:before {
       content: "I'm a supercool person called Sarah"; }  
Enter fullscreen mode Exit fullscreen mode

Just like you can do with other programming languages. Let's consider other operators next.

Comparison Operators

There are operators that can be used to compare one value to another in Sass. They are:

Operator Conditions Description
== x == y returns true if x and y are equal
!= x != y returns true if x and y are not equal
> x > y returns true if x is greater than y
< x < y returns true if x is less than y
>= x >= y returns true if x is greater than or equal to y
<= x <= y returns true if x is less than or equal to y

This comparison can be used to help Sass make decisions. Here's an example.


    @mixin spacing($padding, $margin) {
        @if ($padding > $margin) {
            padding: $padding;
        } @else {
            padding: $margin;
        }  
    }

    .box {
        @include spacing(10px, 20px);
    }
Enter fullscreen mode Exit fullscreen mode

This is compiled to

    .box {
        padding: 20px; }
Enter fullscreen mode Exit fullscreen mode

In the above example, we used the > operator to test if the given padding is greater than the margin. The value of the padding is then set based on the return value. The other comparison operators can be used in the same way. Let's move to the final set of operators.

Logical Operators

The logical operators are:

Operator Conditions Description
and x and y returns true if x and y are true
or x or y returns true if x or y is true
not not x returns true if x is not true

Let's use an example to explain how they can be used. We are going to use a logical operator to decide which background color should be applied to a button.

    @mixin button-color($height, $width) {
        @if(($height < $width) and ($width >=35px)) {
            background-color: blue;
        } @else {
            background-color: green;
        }       
    }

    .button {
        @include button-color(20px, 30px)
    }

Enter fullscreen mode Exit fullscreen mode

This is compiled to

   .button {
       background-color: green; }
Enter fullscreen mode Exit fullscreen mode

The background-color is set to green because both conditions are not met. If or was used, it would have been set to blue because at least one condition is met.

These operators are all valuable and when used properly, can make CSS a lot of fun to work with.

Got any question or addition? Please leave a comment.

Thank you for reading. :)

Discussion (1)

Collapse
katzy687 profile image
Natti Katz

what about separation of concerns?

when is the right time to be writing if else conditions in Scss as opposed to our js code?