In my last post, I have discussed briefly about Sass (Syntactically awesome style sheets) and Sass variables with examples. You can find the last post link below.

Sass : A simplified way to write CSS

Now in today post, we’ll discuss about operators and inbuilt functions provided by Sass.

Sass supports math operators like +, -, *, /, and %. There could be various scenarios using operators like say we have created some basic variables say a variable with font size as 9px. Now in our application we may require various font size based on locations like top, middle, different headers and other sizes for different sections which can be derived from the base font size. Similarly that can be done while using colors and other various case.

Let’s see it via an example. So my scss file is as

If we see above, I have created a variable $base-font-size as 9px then used the same variable to derive font size for multiple classes h1, h2, h3. In h1, * (multiplication) operator is used, in h+ (addition) operator is used and in h3 % opertaor is used. Here if we see the variable in not a pure numeric variable, it contains px as well. But it is taken care while processing the scss file so we dont need to care about it and we can use any other —- as well. So let’s run the code and see the generated css file

Lets see another example

$basepadding : 1%;
.thinpadding
{
    padding : $basepadding;
}
.thickpadding
{
    padding : $basepadding*5;
}
.superthickpadding
{
    padding : $basepadding*10;
}
.normalpadding
{
    padding : $basepadding*2;
}

Here I have defined a base padding and then use the same variable to define the different padding  classes that can be used to define padding at various places.

We can use these operators at various places based on the requirement.

SASS also provide a list of inbuilt functions that can be used for writing the scss which include color functions like darken, lighten, hue. Let’s see an example

We can have a base color and just we can use the same color or lighter color or darker color or any other color in our application. So it can be used as

$basebackgroundcolor : #EDF0F5;

.darkbackground
{
    background : darken($basebackgroundcolor, 50%)
}
.lightbackground
{
    background : lighten($basebackgroundcolor, 25%)
}

Here in first class we have used the darken color which produces the dark color by 50% while the second one produces the light color by 25%.
There are many other color functions and host other Number functions, List functions, String functions etc are available. For complete list, please refer the documentation here http://sass-lang.com/documentation/Sass/Script/Functions.html

In next post, I’ll discuss about Nesting and Mixins with examples.

Cheers,
Brij