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.
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
- The most important drawback with LESS-CSS is that it requires JavaScript to be enabled in the User's browser.
- 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.