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

Saurabh Nayar

5.00/5 (4 votes)

Oct 2, 2013

CPOL

23035

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

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

Compiled CSS - Variables & Operators

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

less.css - Nested Rules

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

Compiled CSS - Nested Rules

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

less.css - Mixins

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

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

Compiled CSS - Mixins

#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

.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

<!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

30^th September, 2013: Initial version