This blog is part of 1 Tute Sets.
LESS Tutorial
Tute set by Mohini
5 Blogs-
How to write LESS CSS?
over 8 years ago
In our previous blog we talked about how to install the LESS into our system. Now in this blog we will learn how to write LESS CSS. So, are you ready? Let's start then.
As we have many different compilers available for LESS, each of them are programmed in different languages like there's a Ruby Gem, PHP version, .NET version, and one written in JavaScript. Here I'll be using JavaScript complier as it is most simplest and easiest to get started with. We just have to include the script in our HTML code, and then it will process LESS live as the page loads.
Include the following links into the <head> tag of your mark-up:
<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" /> <script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>Now we can begin with writing LESS code in our .less file
Nesting Rules
In regular CSS, we used to write each rule set separately, which leads to long selectors that repeat the same stuff again and again like:
.container { }
.container h1 { }
.container p { }
.container .myclass h1 { }
.container .myclass p { }
With LESS we can nest rule sets inside another rule sets. We will rewrite the above example with nesting:
.container {
h1 { }
p { }
.myclass {
h1 { }
p { }
}
}
Also, in case if you want to add pseudo-classes to this nesting structure, you can do so with the help of “&” symbol like:
.menu li a{
& : hover {}
& : active {}
& : visited {}
}
Sample program to demonstrate the use of nesting rules in LESS file.
index.html
<div class="container"> <h1>First Heading</h1> <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p> <div class="myclass"> <h1>Second Heading</h1> <p>LESS enables customizable, manageable and reusable style sheet for web site.</p> </div> </div>style.less
h1{ font-size: 25px; color:#E45456; } p{ font-size: 25px; color:#3C7949; } .myclass{ h1{ font-size: 25px; color:#E45456; } p{ font-size: 25px; color:#3C7949; } } }Compile your style.less file to style.css with the help of command:
lessc style.less style.css
After executing the above command it will generate style.css file with the below code:
.container h1 { font-size: 25px; color: #E45456; } .container p { font-size: 25px; color: #3C7949; } .container .myclass h1 { font-size: 25px; color: #E45456; } .container .myclass p { font-size: 25px; color: #3C7949; }Output:
0 Comment(s)