Sass - Number Operations

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 = =, !=.
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 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 parentheses are outside the list and value is inside, the value will be surrounded by parentheses.
If value is a part of arithmetic expression.
If value is a part of arithmetic expression.
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 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 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))
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 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 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 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 without considering space such as 5 -$myval is similar to 5 - $myval.
It can be used as unary negation operator (-$myval).
It can be used as unary negation operator (-$myval).
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.
$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 −
h2 {
   font-size: 30px;
}

h3 {
   font-size: 5px;
}

.para1 {
   font-size: 37.5px;
}

.para2 {
  font-size: 15px;
}
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.
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.
Open this HTML file in a browser, an output is displayed as shown below.

    50 Lectures 
     5.5 hours 

 Code And Create

    124 Lectures 
     30 hours 

 Juan Galvan

    162 Lectures 
     31.5 hours 

 Yossef Ayman Zedan

    167 Lectures 
     45.5 hours 

 Muslim Helalee
 Print
 Add Notes
 Bookmark this page