Sass | Code Wala

This is the third post in series on SASS. In my first post, I briefly discussed about SASS and Variables. In my second post I discussed about operators and some important inbuilt functions. Links of earlier posts are

Sass : A simplified way to write CSS – Part 1

Sass : A simplified way to write CSS – Part 2

In my today’s post, We’ll discuss nesting, mixins and inheritance with SASS.

Nesting is very common practice in programming languages and supported in all the major languages in one or other way. Even if we see the normal HTML page then we find that the whole page is structured in a nested manner. Similarly we find it in XAML or even normal aspx page as well. But it is not supported in CSS.

Sass supports nesting. Let’s see via an example

If we see above code then we see the whole section is defined for navigation bar in a nested manner. Now let’s see the above CSS when it renders on client and looks like

The rendered version is above. Here the Sass pre-processor processes the file and converts it that can be understood by the browser. Here all the classes are rendered in separate blocks as required.

Now let’s move to other topic that is Mix-ins. In our CSS files, many times we write the same css style at several places. If we require to change the same then we need to update the same at several places. Let’s see it via an example

In above code, we have defined a mix-in variable named custom-style and the same variable, we have used in another classes (class1, class2, class3). To use mix-in variable at another places, use @include keyword as above in the code. Mix-ins can be used in another scenarios as well.

SASS also supports Inheritance. @extend keyword allows us to use the properties of another class. Let’s see it via an example

In this example, say we want to show messages based on response and change the background color based on response type like on error, warning, success etc. This could be written as

Here if we see the above code then we find that we have created a class .message and later we used this class in other classes success, error and warning with extend keyword. Just let’s see how it gets rendered.

As it clearly shows that the classes success, error and warning has power of .message class as well. So we can easily use the inheritance feature as well.

So we have seen in last three articles that Sass provides us the capability to use our normal programming techniques that we are using since long, can be used with CSS. This helps us in writing better and organized manner and also helps not to devote much time on normal CSS.

Hope you all have enjoyed this post.

Cheers,
Brij

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