• library_books today Feb 18, 2015
    • Kushal Jayswal is a frontend developer from India. His expertise includes HTML5, CSS3, Sass, LESS, Responsive Web Design, JavaScript, jQuery, Twitter Bootstrap, Material Design, AngularJS, NodeJS, WordPress and Liferay Theming. He has founded TeckStack.com in 2011 to share his frontend knowledge with the community. His core interests focus on frontend, blogging, UI, UX and many others. He loves to talk on trending frontend technologies and successful blogging.

6 Signs You Should Invest In Sass

sass-banner

Sass is a complement to the CSS. It improves the flow of writing CSS. In other words, it can consider as a plugin or add-on to generate well formatted CSS file with less time and efforts.

But before starting with Sass, one should understand that how it can help in a project. Because at the end, CSS is the only output. So if you think, the project is small with a short timeline then definitely avoid it. But once you become familiar with Sass, you would not ignore it for the future project.

Also, configuring Sass isn't a tough job. Even you can go with a one of the tools listed on the site. I use Scout for HTML projects and WP-SCSS for WordPress.

This article will focus on some of the most used features of the Sass with easy-to-understand examples.

First Thing First - Why Sass

The CSS is an important asset for any front end developer. And hence, it has to be the way he/she wants.  Sass is one of the solution as a pre-processor. It reduces the burden of writing and managing code with some cool features. So, let's jump into it and make our CSS more easier!

What We Can Do with Sass

I remember that when I first heard about Sass, I couldn't convince that why to use it when at the end, everything is converted to CSS. But after using it for couple of projects, I really saved big amount of time.

Below are 7 Sass features to understand Sass in better way.
Please feel free to add your comment.

Improved Branding

Let's assume a project, where we have 5 color schemes that user can configure from the control panel. Can you imagine the number of lines you need to write to make 5 different color schemes, using CSS? It will definitely take longer if there is a big hierarchy of selectors. We can count on about 150-200 lines. May be we would consider some properties for all parent and child elements...

  • Color Schemes
  • Background color
  • Font color
  • Font Family, etc...

And what if client changes his mind to replace the old color with new one? We have to search the color code and replace all over in files. OMG! How frustrating!

The Sass Variable

You have facility to define variables in Sass. It is the same concept as in JavaScript.

Syntax

$variableName: value;

Variable increases the efficiency. Like in above discussion where we have 5 color options to be configured as a branding options, you can define 5 different variables and assign color properties to each. So in future, if you have to change any color for branding, you can simply change variable's value and it will affect the color for all CSS where the same variables have used.

Example

$primary-color: blue;
$secondary-color: green;
.class1{
    background: $primary-color
}

Clubbing and Nesting

From the start, I wanted to write CSS in modular pattern (yes of course, we can add comment blocks and give proper indentation but yet it's not actually the modular). In JavaScript, we can define functions or create modules. And all its properties and variables have limited scope. In Sass, we can go in a nested way. It's more like clubbing the code into one wrapper.

Many times, we required CSS grouping to give the same CSS properties to multiple elements. But Sass has different grouping mechanism and this is the first thing, attracted me to use the Sass! We can build parent-child relationship with the elements, nestedly.

Let's have an example of the Navigation to understand more clearly.

The navigation is an essential part for any project. Below is a sample CSS to manage the navigation horizontally on a web page.

Sample CSS for Navigation

nav{ background: #eee; }
nav li{ float: left; }
nav li a{ display: block; padding: 5px 10px; }

Sass

nav{
   background: #eee;
   li{
       float: left;;
       a{
           display: block;
           padding: 5px 10px;
       }
   }
}

As you can see in above Sass snippet, the code is more readable and we have actually defined <nav> as a component while <li> and <a> tags are children elements to <nav>.

Partials and Importing

It is always good to separate CSS code in different files or folder to increase the manageability. For big projects, such an approach is helpful to manage the code in better way.

Sass Partials

Sass allows to define code in various files. We can make meaningful separations of the code using variables, @extend, @include, etc. in and re-use them across the application.

This is similar to what we do in CSS to import other CSS file. In Sass, we can create .scss files and using @import, call them into the other .scss file. Consider below hierarchical structure of the Sass directory:

Sass (dir)
|- _variables.scss
|- _functions.scss
|- _header.scss
|- _footer.scss
|- _navigation.scss
|- _content.scss
|- _plugin.scss
|- _overwrite.scss
|- main.scss
CSS (dir)
|- main.css

Above structure has two directories - Sass and CSS. Sass is dedicated to .scss files, where main.scss file will be importing all the other .scss files with @import definition. And finally main.scss will be compiled to main.css into CSS folder as a final output.

Using @import for main.scss

@import 'variables';
@import 'functions';
@import 'header';
@import 'footer';
// and so on...

You may have noticed .scss files with underscore ("_"). These files will be merged in a one file and won't show up in output directory - CSS. Also, the order of the partials matters. Likewise, variables and functions files, that must be at the top because these files consist of references to be used in other files.

Extension with Class and Placeholder

There is a concept in JavaScript, where we can extend the functionality of existing object. This is in object-oriented programming approach known as Inheritance. The same thing we can do in Sass using @extend feature.

@extend .some-class;

Let's have an example of buttons by assuming 3 variants with colors. So, here we have to define a generic class for .btn and then you can change properties as per the preference or requirement.

Sass

.btn{
    padding: 15px;
    color: #fff;
}
.btn-success{
    @extend .btn;
    background-color: green;
}
.btn-error{
    @extend .btn;
    background-color: red;
}

CSS Output

.btn, .btn-success, .btn-error {
    padding: 15px;
    color: #fff;
}
.btn-success {
    background-color: green;
}
.btn-error {
    background-color: red;
}

Also, instead of .btn class, we can define through Sass placeholder selector:

%btn{
    padding: 15px;
    color: #fff;
}
.btn-success{
    @extend %btn;
    background-color: green;
}

Function and Include

Everyone knows about functions in JavaScript. Sass also facilitated to write code in that direction. To do so, we have to follow @mixin.

Syntax

@mixin mixin_name(parameter){
    // code
}
.class-name{
    @include mixin_name(parameter){ // code }
}

Below is an example for media query @mixin

@mixin breakpoint($media){
    @if $media == xs {
        @media only screen and (max-width: 480) { @content; }
    }
    @else if $media == sm {
        @media only screen and (max-width: 768) { @content; }
    }
    @else if $media == md {
        @media only screen and (max-width: 960) { @content; }
    }
    @else if $media == lg {
        @media only screen and (max-width: 1170) { @content; }
    }
}

// including mixin
body{
    font-size: 16px;
    @include breakpoint(md){
        font-size: 14px;
    }
}

CSS Output

body {
    font-size: 16px;
}

@media only screen and (max-width: 960) {
    body {
       font-size: 14px;
    }
}

Community Aspect

Sass's official documentation is well maintained. Also, it has large adoption ration, so if you stuck somewhere, don't bother, Google your query and you will be getting it fixed.

Conclusion

To sum up, the Sass is just a tool to help in regular projects and it helps to reduce some burden of front end developer. But counting on Sass features, big projects' CSS can be managed and written in very well manner. Also, the configuration for Sass is not that tough. Liferay like CMS has Sass built-in. It has big adoption ratio and larger community as a helping hand. Moreover, if you have any question, feel free to comment below.

External Resources

  • Sass Meister - An editor that instantly compiles Sass to CSS, so you can see the output with no-time
  • The Sass Way - Tips and Easy to use Sass snippets helpful in real projects
  • Stack Overflow - Q&A Community