How To do Operations in SASS ?


SassScript supports the many types of operations such as Number Operations, Color Operations, String Operations, Boolean Operations, etc...

Lets see the example of each operation and learn how to use it in files...

Number Operations

SassScript supports the standard arithmetic operations on numbers (addition +, subtraction -, multiplication *, division /, and modulo %).

See the code i'm written in SCSS

test_0 image

After the compilation the code is

test1 image

Color Operation

All arithmetic operations are supported for color values, where they work piecewise. This means that the operation is performed on the red, green, and blue components in turn. For example:

test2 image

After the compilation

test3 image

String Operations

In String Operation The + operation can be used to concatenate strings

Looks the code

String operations image

After compiled to

After compiled image

Parentheses operations

Parentheses can be used to affect the order of operations:


test6 image

Is Compiled to

Is complited Image

Interpolation: #{}

You can also use SassScript variables in selectors and property names using #{} interpolation syntax:

check the example below

test8 image

Is compiled to

test9 image

Add new comment