Hashtag Systems | Introduction to LESS (CSS Framework)
8522
post-template-default,single,single-post,postid-8522,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-3.4,wpb-js-composer js-comp-ver-5.5.4,vc_responsive

Blog

Introduction to LESS (CSS Framework)

Blogs, CSS   |   No comment

The day we have started using CSS for enhancing the look and feel of our HTML websites, we found it quite interesting and in a gradual process, it has changed the way our websites appear.

Day-by-day the CSS can be a bit frustrating to write, especially when it comes to more serious projects with thousands of lines of code. We have to duplicating the same rules all over the place and it takes a lot of effort and discipline to keep your CSS maintainable. So we end up with a new CSS framework called “LESS” to improve the normal CSS coding.

LESS is an extension of CSS. It is also known as CSS pre-processor. Less is written in JavaScript, and needs either Node.js or a web browser to run.

Where should I start learning LESS?

Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly. Here’s a quick overview of features.

1) VARIABLES in LESS

Lets go through the following traditional CSS that we are presently using:

.box1 {
  color: #5cb100;
  border: 1px solid #5cb100;
}
.box2 {
  background: #fff;
  color: #5cb100;
}
.box3 {
  border: 1px solid #5cb100;
}

We can use a variable to store a constant value for it and use it later throughout the stylesheet. Let’s rewrite the above code in LESS

@my-color: #5cb100;

.box1 {
  color: @my-color;
  border: 1px solid @my-color;
}
.box2 {
  background: #fff;
  color: @my-color;
}
.box3 {
  border: 1px solid @my-color;
}

NOTE: In LESS, every variable must prepended with the symbol @.

2) Mixins

LESS enables us to use an existing class or ids and apply all it’s styles directly to another selector.

Say we have the following class:

.my-border {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

we can use all the properties of the .my-border class inside various rule-sets like below.

#nav-menu a {
  color: #111;
  .bordered();
}
.my-post a {
  color: red;
  .bordered();
}

3) Nesting

LESS CSS provides the ability to use nested css instead of or in combination with cascading. Lets implement the nesting css into the following CSS block:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

Let’s rewrite the above code in LESS

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

You can also bundle pseudo-selectors with your mixins using this method. Here’s the classic clearfix hack, rewritten as a mixin (& represents the current selector parent):

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

4) Operations

You can do basic math operations to numerical values and colors. Lets say we want to have two divs placed next to each other, the second one is twice as wide and with a different background. LESS knows what the measuring units are and won’t mess them up. Below is an example of LESS operations.

@div-width: 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

5) Escaping

Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

In LESS, we can write this code is as follows

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

6) Functions

Less provides a variety of functions which transform colors, manipulate strings and do maths. Following is the example of LESS function

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

7) Namespaces and Accessors

Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less. Say you want to bundle some mixins and variables under #bundle, for later reuse or distributing:

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

Now if we want to mixin the .button class in our #header a, we can do:

#header a {
  color: orange;
  #bundle.button();  // can also be written as #bundle > .button
}

8) Scope

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

Scope in Less is very similar to that of CSS. Variables and mixins are first looked for locally, and if they aren’t found, it’s inherited from the “parent” scope.

9) Comments

Both block-style and inline comments may be used:

/* One heck of a block
 * style comment! */
@var: red;

// Get in line!
@var: white;

That means our designers understands the perfection more than simply making a pretty website. Planning to design a website? Have a quick chat with us.

No Comments

Post A Comment