Are you tired of writing CSS again and again? Lets get into the LESS, a new technology of writing CSS that makes your CSS code shorter, simplier and easier.
Introduction
In this article, we are going to Introduce a new CSS technology 'LESS'
Objective
In this article, Our Objective is to understand the basics of LESS that is used to beautify CSS.
Getting Started
- At first, we need to download the
less.js JavaScript file. - Place that less.js in your website (ex: in root folder).
- Create a LESS stylesheet for you application (extension is
.less),example Style.less. - Include both less.js and Style.less in your webpage as below,
<link rel="stylesheet/less" type="text/css" href="Style.less">
<script src="less-1.7.0.min.js" type="text/javascript"></script>
Note: Place less.js link before Style.less link as above. when the page loads, less.js runs automatically by converting LESS rules into regular CSS rules.
Reusing Values
To reuse the values, we go with 'variables' in LESS. 'variable' lets to create a value once and reuse it anywhere in the CSS.
Syntax for Creating Variables,
@variable-name: value;
Example:
@myColor: #00ff90;
body { color: @myColor; }
borderStyle { border: 1px solid @myColor; }Above Style in normal CSS looks like,
body { color: #00ff90; }
borderStyle { border: 1px solid #00ff90; }Using Mixins
'Mixin' is a reusable CSS block, that is used to reduce the writing of additional CSS attributes in a CSS block.
Any block(set) that uses class, id or element selector can be "mixed into" other block(set) in the stylesheet.
Example for Mixins in LESS,
.button {
background-color : #d3dce0;
border : 1px solid #787878;
cursor : pointer;
padding : 7px;
}
.smallButton {
font-size : 1em;
.button;
}
.submitButton {
width : 10em;
.button;
}Now the above snippet in normal CSS looks as,
.button{
background-color : #d3dce0;
border : 1px solid #787878;
cursor : pointer;
padding : 7px;
}
.smallButton {
font-size : 1em;
background-color : #d3dce0;
border : 1px solid #787878;
cursor : pointer;
padding : 7px;
}
.submitButton {
width : 10em;
background-color : #d3dce0;
border : 1px solid #787878;
cursor : pointer;
padding : 7px;
}As we observe the difference, we have reduced repeating the CSS attributes in each class by using 'Mixins'.
Adding Parameters to Mixins
Yes, we can add parameters to the Mixins and let them behave like functions.
Example,
.button( @borderColor, @padding ) {
background-color : #d3dce0;
border : 1px solid @borderColor;
cursor : pointer;
padding : @padding;
}
.smallButton {
font-size : 1em;
.button( #efeaac, 10px );
}
.submitButton {
width : 10em;
.button( #25e34f, 5px );
}See the above style, that we added two parameters of @borderColor and @padding. using these parameters, we can change them in different blocks as above.
And we can set the default values to the parameters like below,
.button( @borderColor : #c6c6c6, @padding : 6px ) {
//your content goes here
}
Conclusion
So far we have discussed about Variables and Mixins in LESS. Hope you understand them. If you had any doubt, please comment and let me know.
We will discuss nested rules in LESS-CSS in the next chapter.
Thanks for reading.