Sass - Number Operations

Description

SASS allows for mathematical operations such as addition, subtraction, multiplication and division. You cannot use incompatible units such as px * px or while adding number with px and em leads to produce invalid CSS. Therefore, SASS will display an error if you use invalid units in CSS. SASS supports relational operators like <, >, <=, >= and equality operators = =, !=.

Division and /

SASS allows division operation (/) on numbers as we do in normal CSS. You can use division (/) operation in three situations.

If the value is stored in a variable or returned by function.
If parentheses are outside the list and value is inside, the value will be surrounded by parentheses.
If value is a part of arithmetic expression.

Subtraction, Negative Numbers, and -

Using SASS, you can perform some operations such as subtraction of numbers (10px - 5px), negating a number (-5), unary negation operator (-$myval) or using identifier (font-size). In some of the cases, these are useful like −

you can use spaces both sides of - when performing subtraction of numbers
you can use space before the - , but not after the negative number or a unary negation
you can enclose the unary negation within parentheses separated by space (5px (-$myval))

Examples are −

It can used in identifier such as font-size and SASS allows only valid identifiers.
It can be used with two numbers without space i.e, 10-5 is similar to 10 - 5.
It can be used as beginning of a negative number (-5).
It can be used without considering space such as 5 -$myval is similar to 5 - $myval.
It can be used as unary negation operator (-$myval).

Example

The following example demonstrates the use of number operations in the SCSS file −

<html>
   <head>
      <title>Number Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
         <p class = "para1">SASS stands for Syntactically Awesome Stylesheet..</p>
         <h2>Hello...Welcome to Sass</h2>
         <h3>Hello...Welcome to Sass</h3>
         <p class = "para2">Hello...Welcome to Sass</p>
      </div>
   </body>
</html>

Next, create file style.scss.

style.scss

$size: 25px;

h2{
   font-size: $size + 5;
}

h3{
   font-size: $size / 5;
}

.para1 {
   font-size: $size * 1.5;
}

.para2 {
   font-size: $size - 10;
}

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

sass --watch C:\ruby\lib\sass\style.scss:style.css

Next, execute the above command; it will create the style.css file automatically with the following code −

style.css

h2 {
   font-size: 30px;
}

h3 {
   font-size: 5px;
}

.para1 {
   font-size: 37.5px;
}

.para2 {
  font-size: 15px;
}

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in number_operations.html file.
Open this HTML file in a browser, an output is displayed as shown below.

sass_script.htm