Sass Operators

❮ Prev Next ❯
You are Here:

Sass Operators

Sass supports a handful of useful operators for working with different values. The following are the different types of operators available in Sass. Sass has a pretty standard order of operations, from tightest to loosest, but you can explicitly control the order of operations using parentheses.

Example

SASS TO CSS CONVERTER
//Check your console @debug 1px == 1px; // true @debug 100 < 50; // false @debug 1in - 10px; // 0.8958333333in @debug "Helvetica" + " Neue"; // "Helvetica Neue" @debug true and true; // true
Run

Types of Operator

The following are the different types of operators available in Sass.

Types of OperatorSymbolic Representation
Equality Operators==, !=
Relational Operators<, <=, >, >=
Numeric Operators+, -, *, /, %
String Operators+, -, /
Boolean Operatorsand, or, not

Order of Operations

Sass has a pretty standard order of operations, from tightest to loosest:

  1. The unary operators not, +, -, and /.
  2. The *, /, and % operators.
  3. The + and - operators.
  4. The >, >=, < and <= operators.
  5. The == and != operators.
  6. The and operator.
  7. The or operator.
  8. The = operator, when it’s available.

Parentheses

You can explicitly control the order of operations using parentheses.

Example

SASS TO CSS CONVERTER
//Check your console @debug (1 + 2) * 3; // 9 @debug ((1 + 2) * 3 + 4) * 5; // 65
Run

Reminder

Hi Developers, we almost covered 99.1% of Sass Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in Sass.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

❮ PrevNext ❯

Share this Page

Meet the Author