CSS PreprocessorsĀ Getting Started | SASS and LESS | Practical Examples

List Of Content

ADS Area (CARBON)

ADS Area (CARBON)

 

Overview

CSS Preprocessors (PreCompilers) are part of the now days modern app's development since it makes CSS more enjoyable as well as very easy to use alongside then on demand features it offers to web designers, if you have been working with CSS before you would have thought about why CSS didn't add support for a specific feature or even add variables as it is the most on demand features as of Now, it is very important to start learning these languages for making better and easier to work on web projects, in this video we are going to see the two famous CSS PreCompilers (SASS and LESS) and which one you should use, also we are going to see a practicle examples concerning that.

 

Getting Started

SASS and LESS are pretty much the same things with some differences but both can be used to create scaled web apps, let's take a look at this differences:

(SASS) 

  • Based on Ruby
  • Widely Used and Very Famous Among Developers

 (LESS)

  • Based on javascript (Node.js)
  • Easy to Get Started With

Well, there aren't that many differences between both of them since they are very powerful, you can use other ones but this is what usually developers would use on modern web projects.

In this tutorial, we are going to use SASS since it is widely used also not that complicated to get started with.

Getting Started With SASS

First, if you don't have ruby installed on your machine please go here and download and install it for your OS, most of the OS have Ruby preinstalled for you so double check if your operating system is a bit old.

For compiling SASS Style file into Regular CSS (Vanilla CSS) we need a tool, there are many of them you can either use a CLI or a GUI  tools which we are going to use in this tutorial, so make sure to download it from here the tool called Koala Helps you Precompile SASS into CSS with a support with a large number of features (Auto Compiling, Compressing...).

Now you need to create a basic web app (HTML Page and app.scss) and .scss is the extension for SASS files make sure to put the right way in order to our Compiler knows where to look for, open up koala and try to locate your Working Directory, the SASS File should automatically appear for you and all you need to do to compile is press the button, you should also specify the Output directory for the Precompiled CSS make sure to put under the same directory as your Html page since you need to include that in it.

In this example, we are going to create 4 items and try to style them and getting the benefit from SASS here is our Html page Structure:

<!-- Container and 4 items -->
<div class="container">
  <div class="item-1">
      item1
  </div>
  <div class="item-2">
      item2
  </div>
  <div class="item-3">
      item3
  </div>
  <div class="item-4">
      item4
  </div>
</div>

Let's say we wanna give all the items the same style, in normal CSS we would do 

...
.item-1 {
  box-shadow: 0px 0px 15px rgba(15, 15, 15, 0.2);
  padding: 30px;
}
.item-2 {
  box-shadow: 0px 0px 15px rgba(15, 15, 15, 0.2);
  padding: 30px;
}
.item-3 {
  box-shadow: 0px 0px 15px rgba(15, 15, 15, 0.2);
  padding: 30px;
}
...

So we also want to give them a background color, we can do that using normal css but we will use the same code over and over here where SASS Variables comes in handy, all we need to declare deffirent color variables then assing them to background color on the items, let's say we want to item 1 and 2 to share the same color which is green and as well as for the 3 and 4 th items to share the blue color, we declare a css variable using the $ (Dollar Sing) and we give it a name and a value.

$blue_color: #3498db;
$green_color: #2ecc71;
//Then we can use it normally in item's styles 
.item-1 {
   ...
   background-color: $green_color;
}
//Make sure to apply this for all the other items 

As you can see, this is how variables can make your life way much easier just by declaring properties that you need to use more than once in your code.

Also, there is the Ability to create a Base Style and then inherit from it on the items (Child Styles) so you declare a style once and use multiple time across your project and that is using the extent

/*Since all of our items share the same padding and box shadow, so we can Define that in a base Style */
%base_item {
   box-shadow: $box_shadow;
   padding: 30px;
}

.item-1 {
   @extend %base_item;
}
//You can Also override the Styles under the base item 
.item-2 {
   @extend %base_item;
   padding: 50px;
}
//Item 2 will take more padding than the others

 

How Cool is that, if you still doubting why you should (Probably Must) use PreProcessors in your next web project here is a very nice feature called the mixin which works pretty much like a function, takes a property or more and apply it over the item (Element)

...
//Using Mixins 
@mixin border($border_color) {
   border: 5px solid $border_color;
}

//Use it in your item(s)
.item-4 {
   ...
   @include border($green_color);
   ...
}
...

That way you will be able to apply a green border around any item you choose, very easy you can also apply more than one property which comes in handy especially when you are creating Responsive Web apps.

One of the Important features is importing CSS code (style) from other files, some of you may say CSS already has this feature well, actually it does but the only problem is when you have a chunk of files and you need to import them inside each other this will effect your application performance since for each file it is going to send an Http GET Request in order to import it, but SASS or other proprocessors will take all files and put them togethe in one big file before your application runs, which gonna help alot for making friendly web apps.

@import "otherStyle";
//Well, you do not need to include the file extension because it will automatically know about it.

If you like to structure your styles the same way you do with Html elements where you nest children inside containers (parents) or wrappers and you love doing it that way, PreProcessors (SASS) has a feature called nesting which allows you to put child styles inside parent's styles (Classes or Ids) in order to organize things up and make sure that styles won't be applied unless they are inside the parent class which is pretty great.

//Nesting 
.container {
   dispaly: flex;
   align-items: center;
   justify-content: center;
   //item 1 style inside container (Parent ==> Child)
   .item-1 {
      @extend %base_item;
      ...
   ...
}
//Pretty nice and Tiedy Style which contains both Parent and Childs 
   

Awesome!

What's Next

After learning the basics and seeing how preprocessors actually work, now you can start using this in your next web project and start practicing that.

Share Tutorial

Made With By

Ipenywis Founder, Game/Web Developer, Love Play Games