Click here to Skip to main content
15,867,921 members
Articles / Web Development / LESS
Tip/Trick

Understanding less.css and Creating Responsive Grids using less.css

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
2 Oct 2013CPOL 22K   8   2
A simple beginners tutorial for less.css.

Introduction

A quick introduction of less.css - a simple CSS preprocessing framework.

less.css is:

  • A CSS preprocessor - compiles into CSS either by using JavaScript at client side, or at server side preprocessing
  • Extends CSS basics with features such as variables, operators, functions, mixins
  • Helps keep styles better organized
  • Speeds up CSS development
  • Can be learnt in a matter of hours
  • Simplifies maintenance of responsive design styles

Using the Code

less.css comprises simple yet powerful features:

less.css - Variables & Operators

CSS
@scale: 0.1;
@mainBoxHeight: 100px;
div {
  height: (@mainBoxHeight * @scale);
}
p {
  height: (@mainBoxHeight * @scale);
}

Compiled CSS - Variables & Operators

CSS
div {
  height: 10px;
}
p {
 height: 10px;
}

less.css - Nested Rules

CSS
#mainBox {
  div {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;}
  }

Compiled CSS - Nested Rules

CSS
#mainBox div {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}

less.css - Mixins

CSS
.lessdemo (@scale: 0.1) {
 div {
   height: (@mainBoxHeight * @scale);
 }
 p {
   height: (@mainBoxHeight * @scale);
 }
}

#normalBox {
 .lessdemo;
}
#bigBox{
 .lessdemo(0.4);
}

Compiled CSS - Mixins

CSS
#normalBox div {
  height: 100px;
}

# normalBox p {
 height: 100px;
}

#bigBox div {
  height: 400px;
}

#bigBox p {
 height: 400px;
}

Points of Interest

Example: Responsive Grids

less.css helps in maintaining CSS code. It helps in less clutter and makes it easier to deploy Responsive Grids. Now that we have learnt the basics, let's try to create responsive grids using less.css.

Sample CSS File

CSS
.fillBody (@content: "less than 320px") {
	body {
		margin: 40px;
		background-color: #ffd;

		&:after {
			content: @content;
			font-size: 300%;
			font-weight: bold;
			position: fixed;
			bottom: 60px;
			left:0px;
			width: 100%;
			text-align: center;
			background-color: hsla(1,60%,40%,0.7);
			color: #fff;
			z-index:100;
			white-space: nowrap;
			word-wrap:break-word;
		}
	}
}

@media only screen and (min-width: 100px) {
	.fillBody("less than 100px");
}

@media only screen and (min-width: 320px) {
	.fillBody;
}

@media only screen and (min-width: 480px) {
	.fillBody("320px to 480px");
}

@media only screen and (min-width: 768px) {
	.fillBody("480px to 768px");
}

@media only screen and (min-width: 1024px) {
	.fillBody("768px to 1024px");
}

.column {
	background-color:azure;
    	border:1px solid #346789;
	box-shadow: 2px 2px 19px #e0e0e0;
    	border-radius:0.5em;
    	color:black;
    	font-size:1.2em;
    	text-align:left;
	display: inline;
	float: left;
	margin-left: 3%;
	margin-bottom:4%;
	padding: 1%;
	
	&:hover {
	    border:1px solid #123456;
	    box-shadow: 2px 2px 19px #444;
	   -o-box-shadow: 2px 2px 19px #444;
	   -webkit-box-shadow: 2px 2px 19px #444;
	   -moz-box-shadow: 2px 2px 19px #fff;
	    opacity:0.9;
	    cursor:pointer;
	    filter:alpha(opacity=90);
	}
}

@media only screen and (min-width: 768px) {
	.column {
		width: 28%;
	}
}

Sample HTML Code

CSS
<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet/less" 
		type="text/css" href="lessdemo.less">
	</head>
	<body>
		<div id="col1" class="column"
		>A simple demo of responsive grids using Less.css</div>
		<div id="col2" class="column">
			<ul style="list-style-type:circle">
				<li>less.css is a CSS preprocessor â€" 
				compiles into CSS either by using JavaScript at 
				client side, or at server side preprocessing</li>
				<li>Extends CSS basics with features such as variables, 
				operators, functions, mixins</li>
				<li>Helps keep styles better organized
				<BR>Speeds up CSS development</li>
			</ul>
		</div>
		<div id="col3" class="column"
		>Learn less.css in matter of hours</div>
		<script src="less-1.4.1.min.js" 
		type="text/javascript"></script>
	</body>
</html>

History

  • 30th September, 2013: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralNice overview Pin
Davinder Singla7-Oct-13 19:27
professionalDavinder Singla7-Oct-13 19:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.