SASS Operators

Syntax

SASS uses various operators to perform arithmetic calculations. Here are some commonly used operators in SASS:

Operator	Example
+	$value: 5 + 10;
-	$value: 10 - 5;
*	$value: 5 * 10;
/	$value: 10 / 5;
%	$value: 10 % 3;

Example

$width: 500px;
$margin: 20px;

.container {
  width: $width - $margin;
  padding: $margin / 2;
  margin-bottom: $margin % 3;
}

Output

.container {
  width: 480px;
  padding: 10px;
  margin-bottom: 2px;
}

Explanation

In the above example, $width and $margin are assigned values of 500px and 20px respectively. The .container class then uses the subtraction operator - to subtract $margin from $width to calculate the container's width. The division operator / is used to calculate the container's padding, which is half of $margin. Lastly, the modulo operator % is used to calculate the remainder when $margin is divided by 3, which is used for the margin-bottom property.

Use

SASS operators are used for performing arithmetic operations in stylesheets. They are particularly useful when working with variables, as they allow for easy manipulation of values without having to manually perform calculations.

Important Points

• SASS uses various operators for performing arithmetic calculations
• Operators can be used with variables, allowing for easy manipulation of values
• Some commonly used operators in SASS include +, -, *, /, and %

Summary

SASS operators allow for easy manipulation of values and performing arithmetic calculations in stylesheets. They are particularly useful when working with variables, and some commonly used operators include +, -, *, /, and %.