Less: A look into the CSS Preprocessor
Feb 25, 2013
What is LESS?
LESS is a dynamic style sheet language that allows developers to reuse CSS elements and write LESS code with the same semantics. It has a similar concept as its predecessor SASS, but I think is much simpler.
Compilation
You can do it in two different ways:
1) Precompiling a .less file with a free tool
You will need a compiler to transform your .less file into a .css file.2) Using the JavaScript version (less.js)
The .less file contains the LESS code which is what you will be writing, after compiling you will have a standard CSS that a web browser can read and process.
There are a lot of third party compilers available to complete this process. As a Windows user, I recommend WINLESS; however, if you are a MAC user, you will have to consider another option.
This process is also extremely simple. You just have to download the library from http://lesscss.org to include the script in your markup HTML. The browser will process it as the page loads.
Include the following in the <head> of your markup:
<link rel="stylesheet/less" type="text/css" href="styles.less" />NOTE: Make sure you include your style sheets before the script.
<script src="less.js" type="text/javascript"></script>
LESS Examples
Nesting:
Satandard CSS
#footer {}
#footer #nav {}
#footer #nav ul {}
#footer #nav ul li {}
#footer #nav ul li a {}
LESS Code:
#footer{
#nav {
ul{
li {
a{}
}
}
}
}
Variables:
Standard CSS:
.title, #left_rail, #header, #footer, p, h1{
Color:red;
}
LESS Code:
@default-color: #4455EE;
#header{background-color:@default-color;}
#footer{color: @default-color;}
h1{color: @default-color;}
Reuse of Classes:
Standard CSS:
LESS Code:-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
.rounded-corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#left_rail {
.rounded-corners;
}
Parametric Mix-ins:
Standard CSS:
.rounded_corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
LESS Code:
#header {
.rounded_corners;
#footer {
.rounded_corners(10px);
}
Functions and Operations:
Standard CSS:
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
LESS Code:
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
LESS will change the way you write CSS. It saves time and unnecessary work. You can use LESS to create variables, perform operations on variables, nest rules, and build complicated mix-ins to simplify your style sheets.
Frequently Asked Questions
AEM is built on Adobe Cloud Technology, which means easier access for both you and your assets from anywhere. You don't have to worry about the final content presentation on each platform or device.
Through modules for website creation, forms, mobile applications, communities, and assets, AEM streamlines web content management and delivery. When taken as a whole, these modules make AEM a fantastic CMS tool. With the help of the AEM CMS module, the business can create and manage websites from a single location.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.