LESS a Dynamic CSS

Introduction

 

This article is all about a cousin brother of CSS that is more effective and friendly in comparison to CSS. Want to know how? Why? And many other factors? Join me on this journey and let me explain all these facts to you.

 

Outlines

• Overview
• Introduction
• How to Use
  • Methodology: 1
  • Methodology: 2
• Structure
• Fundamentals
  • Variable
  • Mixins
    • Mixins
    • Parametric Mixins
  • Operations
  • Color Functions
  • Nested Rule
• Key Points
• Summary

Overview

 

This article explains what CSS is not the single design language in the world of web development. There are others that exist in that world too, but unfortunately, our development world is not familiar with those other styling languages that are comparatively better, easier and more effective than CSS.

 

In this entire article I'll try to explain LESS from the very scratch to tip by including all these second thoughts that have begun developing in your mind:

• What is LESS?
• Why use LESS?
• How it's better than CSS?
• How to use LESS?
• Where you can use LESS?
  and so on.

So buckle up guys, because this journey is fun…

 

Basic | LESS

 

So I hope you all will be familiar with Cascading Style Sheets (CSS). Relax, just kidding guys. Well now I am starting this introduction with a series of questions, so be ready to answer them. I guess all of you will easily answer all these questions, here we go.

 

What is CSS?

 

Yes, the answer in your mind is correct. In simple words, it's a styling language used for general design purposes.

 

Where we do use CSS?

 

Yes, again the answer in your mind is correct, most commonly with HTML pages (doesn't matter whether static or dynamic).

 

In how many ways we can use CSS?

 

Great, you are again right. We can use CSS internally, in a separate external file and inline to depending on your requirements.

 

Now for my final question.

 

How many styling languages do you know?

 

 

 

This question is kind of weird but it's true. Most commonly we can see developers are only familiar with 1 or 2 styling language but more than that you will hardly see. But there are many other styling languages that exist too that are better than CSS, easy and flexible too.

 

But we are not familiar with these extra and more advantageous styling languages. One of them is "LESS". So this article is all about LESS.

 

Introduction

 

LESS is nothing but a dynamic style sheet, that comes into the light for making web designers work more easily and conveniently. You can find its official definition as:

 

It is a dynamic style sheet language.

 

Which is purely true and why I am saying that you will find that later in this article. One more thing is that you don't need to learn something new or invest your very precious time in learning LESS if you are familiar with CSS. It uses the same base functionality of CSS and it's fundamental but in a more dynamic way.

 

 

So you can call LESS is "Dynamic CSS" too.

 

How to Use?

 

This is the most important and common question that comes into our mind when going through new technologies. So the answer to this question is very simple, as I said in the preceding that it's just a dynamic CSS so it requires only a simple text editor to write its respective snippet.

 

Now I will share methods or I better say approaches of using LESS in your code or development work. Here they are.

 

Methodology: 1

 

"Compiling in the Browser with LESS.JS", this is the first method of using LESS functionality in your application.

 

Now you must be thinking what that new term is in that entire scenario and how it's going to help you in using LESS. This new term is "LESS.JS". Now let's see what LESS will do for us in the entire scenario.

 

LESS.JS is nothing but a JavaScript library (you can easily download it). LESS.JS will use AJAX requests to grab your fewer files then process all the fewer files to convert them into CSS and finally, it will automatically inject the Style sheet into your head tag.

 

Methodology: 2

 

"LESS & Command Line", this is the second method of applying LESS into your document.

 

In order to use this method, you need to install node.js (you can download it from its official website depending on your OS) first in your system and after that, you can install the LESS module by simply running the following command in a command prompt:

 

 

After installing the LESS module, run the following command to convert style.fewer files into styles.css, for this:

 

 

Structure

 

There is no change in its structure. It's simply similar to the structure of CSS. As I already said in the preceding paragraph you can use LESS in all the following three ways like CSS:

• InLine
• Internally
• Externally

Here is a demo structure I am showing you external type functionality.

• HTML Structure

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>LESS | Demo</title>
      <link rel="Stylesheet" href="StyleSheet.css" type="text/css" />
  </head>
  
  <body>
  <div>
  <span class="Square" id="S1"></span>
  <span class="Square" id="S2"></span>
  <span class="Square" id="S3"></span>
  </div>
  </body>
  
  </html>

• CSS Structure

  body
  {
  }
  
  .Square
  {
        display: inline-block;
        margin: 25px;
        height: 200px;
        width: 200px;
        padding: 1px;
        background: #6e6e6e;
  }

• Output
   

Now in the fundamental section I'll explain some cool operations that can help you make this pattern design come alive and cool without any extra effort.

 

Fundamentals

 

In this section, I'll try to explain the fewer fundamentals, these are not all the fundamentals but is the basics that are very important if you are interested in LESS.

 

So let's explore them.

 

• Variable
   
  In LESS, variables are declared using the @ symbol. You just need to provide two attributes after this symbol:

  - Name (Color)
  - Value (#6e6e6e)
  @Color: #6e6e6e;

  Demo Snippet

  .Square
  {
        display: inline-block;
        margin: 25px;
        height: 200px;
        width: 200px;
        padding: 1px;
        background: @Color;
  }

  Using this method now you can make any number of changes in your application without changing the color script tag again and again. Through LESS you must only change the place of the default declaration and bang, you will see the magic.
   
• Mixins
   
  LESS provides some extended functionality such as drawing shapes, diagrams, defining border margins and so on that was not possible with even CSS3. This extended functionality is provided by several add-ons or prefixes in LESS, these are -webkit-, -moz-, -fa- and so on.
   
  So our functionality goes something like this:

  #S1
  {
        -moz-border-radius: 550px;
        -webkit-border-radius:550px;
        border-radius: 550px;
  }

  (It will turn the first shape into a circle.)
   
  Mixins are also of 2 types, based on the parameters:
   
   
• Operations
   
  In order to use mathematical operations in your web application, you are always welcome to use LESS in your application. LESS provides you this freedom.
   
  You can use mathematical operators in your style sheet by simply declaring a variable. I'll show you how easily you can do that.

  Here's a demo snippet:
  @SquareWidth: 100px;
  @Border: @SquareWidth * 0.1;

  (This will add some border to the shapes.)
   
  You can use these types of operations for your web pages simply using LESS functionality without any headache.
   
• Color Functions
   
  Are you guessing about this functionality, such as what it's going to create for you, or it's a functionality by its name? If yes then let's see how close you were.
   
  LESS provides certain sets of color functions that can be used in web applications to make them more effective and dynamic. These color functions are as follows:
   
   
  So are you ready to mingle with these functions?
   
  Let's explore them.
   
  Darken() and Lighten()
   
  These functions help in adding some black and white effects in your text, picture, shape and so on, respectively.
   
  Saturate() and Desaturate()
   
  These functions help in making your text, picture, shape and so on more colorful or taking them more near to a grayscale respectively.
   
  fadeIn() and FadeOut()
   
  These functions are used for increasing or decreasing transparency in your web application.
   
  Spin()
   
  It is used for modifying the hue of the color, used in your application.
   
• Nested Rule
   
  Now imagine a scenario in which you are designing a complex page using CSS. In which you are using many chain selectors in order to reach the desired page view.
   
  Something like this:

  #header
  /* Main #header Style*/
  {
     h1
     {
        /* #header h1 Style */
     }
     .
     .
     .
     {
         .
         .
         .
     }
  
  }

  Now does this seem more cool and artistic? If yes then the choice is yours and if no then let's create a world of possibilities with LESS nested rules.

Key Points

• Makes styling easier
• Easy to handle
• It's nothing but a CSS Preprocessor
• Can be called “Dynamic CSS" too
• You can use any of the methods to use its functionality in your web page.
• Works more effectively than CSS
• Decreases nesting complexities
• You can use mathematical operators in it
• MIXins for advanced functionality
• Color Functions, for making your page much more adaptive and stylish

There are many more key points. If you find another then let me know and I'll try to update them in this article or in the next part.

 

Summary

 

I hope you enjoyed this article and have learned something new and interesting, that is not necessary to learn but if you become familiar with it, no doubt it will provide you advantages.

 

I'll add more demos and a working snippet in more detail in the next part of this article until then stay tuned and keep coding.