×


Sass Part 3 – Operators and control directives

This is the third part of our Sass series aimed at providing insight in o  Sass operators and control directives. Part 1 of the series provided an introduction and taught by example about variables and nesting in SassPart 2 of the series provided a better understanding of @-rules and Directives.

 

WHAT YOU WILL LEARN

  • Operators and types of operators in Sass.
  • Control directives and types of control directives in Sass.

Operators in Sass

Expressions are written using operators. There are different types of operators supported by sass and they can be broadly classified into Numeric operators, Relational operators/ Comparison operators, and Boolean operators.

Numeric operators: +, – , *,  / ,% are numeric operators. These operators are used to write expressions that perform mathematical operations just like in most programming languages.   +, – and / can be used with values of string data type to perform operations like string concatenation.   +,-,/ are also used as unary operators(operators which require one operand).

TRY IT OUT

Relational operators/Comparison operators:    <=, >=, >, <!=, == are  relational operators. These operators are used to write comparison expressions.

 

Control Directives

Control Directives are directives that are used to create style declarations/rules based on conditions(eg:@if) or add styles in a loop(eg:@for). Control directives evaluate expressions and these expressions are written using operators. There are two types of control directives

Conditional directives

Loop directives

Conditional Directives

Conditional directives are directives that evaluate conditional expressions. If the expressions are evaluated not to false, then the code inside the block is processed to generate CSS.

There are 3 conditional directives,

@if

@else 

@else if

@If directive: @if directive is used to evaluate an expression into true or false, just like in any other programming language. Style rules/ declarations can be added to CSS processed using the @if directive.

@else and @else if directives:    @else and @else if  works in a similar way as in other languages. If the if  condition is not satisfied, the code inside else is executed. else if is used when more conditions are to be checked after the if condition has failed.

See the following example

TRY IT OUT

 

 

Loop Directives

Loop directives are used to generate style rules/declarations in a loop. There are 3 loop directives in Sass,

@for

@each

@while

@for directive: @for  makes it easy to add declarations in a loop. Here $font-size is having a datatype list and has a list of font sizes.

TRY IT OUT

@each directive:@each iterates through all items in the map/list. In the following example with a map, the first variable represents key and second variable represent value;

TRY IT OUT

@while directive: @while executes a block of code until a certain condition is reached.  See the following example in which the block of code is executed till the value of $index becomes less than or equal to 4. The value of $index initially is 1 and it is incremented inside the block of code inside while.

TRY IT OUT

Note: Code snippets given here are just examples to show how the  Sass features work.

 

WHAT YOU LEARNED

  • Operators and types of operators in Sass: Numeric operators, Relational operators/ Comparison operators, and Boolean operators
  • Control directives and types of control directives in Sass. Two types of control directives.Conditional directives(@if, @else, @else if) and Loop directives(@for,@while,@each)

 

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *