Working with Grouping, Importing and Escaping in LESS

Goud.Kv
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 3599 red flag

As we know that LESS is the simple, smart and shorter style of CSS, this is the continuation of the previous articles of LESS-CSS.
Recommendation
Read Working with Nested Rules, Operators and Functions in LESS before this article.

Introduction

In this article, we are going to discuss the Grouping using namespaces, Importing other files and Escaping in LESS-CSS.

Objective

The main objective of this chapter is to learn Grouping, Importing and Escaping in LESS.

Grouping Using Namespaces

In LESS, we can group variables and mixins under a namespace to keep them separate from other rulesets.

Below syntax shows that, how to create a Namespace by just wrapping the rules in a new selector.
#Namespace {
  .selector1 { ...... }
  #selector2 { ...... }
}
Then you can give reference to the rules in the namespace by using child selector '>'.
#Namespace > .selector1;
#Namespace > #selector2;
Lets take an example, 
#myPage {
 
  @outerWidth: 900px;
  @borderWidth: 12px;
  @padding: 12px;
 
  #myStyle {
    width: @outerWidth - ( @borderWidth + @padding ) * 2;
    border: @borderWidth solid #888;
    padding: @padding;
  }
 
}

so, we can now mix the entire #mystyle ruleset into a #my rule as follows

#my { 

  #myPage > #myStyle;

}


Importing Other LESS or CSS files

LESS had an amazing property of importing stylesheets. If you think that your LESS stylesheet is very large, then you can split that into several .less files and then just import the individual .less files into the main stylesheet by using @import directive. 

@import "articles.less";
@import "interviews.less";

By using this method, we can easily find and edit the CSS.

Also you can import a regular CSS file without running it through the LESS compiler. Just give .css extension.

@import "forums.css";  // LESS doesn't parses this one.


Escaping 

In some cases, if you need to provide CSS output in a proper or invalid syntax, we will use the 'escaped value'.
'~' is the operator used to escape a value in in which LESS doesn't recognizes.

See the below example to understand quite easily.

body {

  @width ~"30px/120px";

  border: @width solid grey;

}


As we are using '~'(escaping) operator, the result becomes as below,

body {

  border: 30px/120px solid grey;

}


Disadvantages of Less

  1. The most important drawback with LESS-CSS is that it requires JavaScript to be enabled in the User's browser.
  2. You will experience a slight mismatch while running and downloading the less.js file, even your browser understands (runs) JavaScript.
To avoid these issues, you have to pre-compile LESS into CSS. there are so many ways to do that such as,  using JavaScript framework Node.js, using lessphp in PHP, using online compiler, using Less.app for Mac users.

Reference

www.elated.com

Conclusion

  So far we have seen the Grouping, Importing and Escaping in LESS-CSS and also the disadvantages of LESS. Hope you understand the above topics. If you get any confusions or doubts, please let me know by commenting below. 


Thanks for reading,

Regards,
Krishna.



Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)