Click here to Skip to main content
Click here to Skip to main content

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

, 2 Oct 2013
Rate this:
Please Sign up or sign in to vote.
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

  • 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)

About the Author

No Biography provided

Comments and Discussions

 
AnswerMessage Automatically Removed PinmemberMember 1014497618-Feb-14 23:12 
GeneralNice overview PinprofessionalDavinder Singla7-Oct-13 19:27 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 2 Oct 2013
Article Copyright 2013 by Saurabh Nayar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid