Introduction to LESS in CSS

Goud.Kv
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 9491 red flag
Rating: 3.75 out of 5  
 4 vote(s)

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

  1. At first, we need to download the less.js JavaScript file.
  2. Place that less.js in your website (ex: in root folder).
  3. Create a LESS stylesheet for you application (extension is .less),example Style.less.
  4. 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.


Recommendation
Read Working with Nested Rules, Operators and Functions in LESS after this article.
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)