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

Saurabh Nayar

5.00/5 (4 votes)

2 Oct 2013CPOL

23K

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

30^th September, 2013: Initial version

License

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