If you’re to nail CSS, Less is more – part 2

In the last post, we’ve started running Less script to use variables in dynamic CSS file. Now, we’re going to get a bit more real and start designing sort of a real web page, with what would’ve usually been a header, a menu, a sidebar with blocks, a page container and some stuff in it. We’re gonna do it all using CSS first, then Less.

Nesting styles

In your project directory, create a new file, called nesting.html. For the sake of this post only, let’s also create a nesting.less file within css/ directory. Here’s the content of both the files :

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Less is more</title>
  <link rel="stylesheet/less" type="text/css" href="css/nesting.less" />
  <script type="text/javascript" src="js/less.js"></script>
</head>
<body>
  <div id="header">
    <h1>This is the nesting page</h1>
    <ul class="menu">
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
      <li>Menu 4</li>
    </ul>
  </div>
  <div id="sidebar">
    <div class="block">
      <h1>Block 1</h1>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="block">
      <h1>Block 2</h1>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="block">
      <h1>Block 3</h1>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div id="container">
    <div class="article">
      <h1>Article title 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.</p>
    </div>
    <div class="article">
      <h1>Article title 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</body>
</html>

It’s long, but nothing fancy here.

Fun trick first

Here’s a fun trick; in your browser, open the nesting.html page, which will look roughly like that at this point :

No style nesting page

Now, in your browser, add the following to the url, right after nesting.html :  #!watch    (e.g. http://localhost/less/nesting.html#!watch).
This way, you enter the watch mode; the fun part of it is, whenever you change the CSS/Less file (and save your changes), the page will automatically be updated. Neat, right ?

The classic CSS

Here’s a classic CSS content (in nesting.less) :

body,div,p,ul,li,table,tr,td, h1 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font: 12px normal Arial, Sans-serif;
	color: #666;
}
#header {
	margin: 0;
	width: 100%;
	height: 100px;
	background-color: #ccc;
}
#header h1 {
	font-size: 36px;
	margin: 0;
	padding: 10px 5px;
	color: #000;
}
#header ul {
	position: absolute;
	top: 60px;
	left: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 100%;
	background-color: #ddc;
}
#header ul li {
	float: left;
	padding: 10px;
	width: 25%;
	height: 40px;
	border-left: 1px solid #333;
	text-align: center;
	font-size: 18px;
}
#sidebar {
	float: left;
	padding: 10px 20px;
	width: 25%;
	top: 0;
	bottom: 0;
}
#sidebar .block {
	text-align: justify;
	margin-bottom: 12px;
	background-color: #ccd;
	padding: 0 5px 10px 5px;
	border-radius: 5px;
	-moz-border-radius : 5px;
	-webkit-border-radius: 5px;
}
#sidebar .block h1 {
	font-size: 18px;
}
#container {
	float: left;
	width: 75%;
	padding: 10px 20px;
}
#container .article {
	font-size: 15px;
	text-align: justify;
	margin-bottom: 15px;
	background-color: #ddf;
	padding: 0 10px 20px 10px;
	border-radius: 10px;
	-moz-border-radius : 10px;
	-webkit-border-radius: 10px;
}
#container .article h1 {
	font-size: 24px;
	padding-left: 20px;
	border-left: 4px solid #666;
}

Let’s just forget the first 5 lines of the code that are supposed to handle the padding behaviour in different browsers (more info on this page). Here’s the tree of styles :

- body
    - header
        - h1
        - ul
            - li
    - sidebar
        - block
            - h1
    - container
        - article
        - h1

And it looks like this (oh, wow) :
La version CSS

The Less version

Now we’re to use one of the most powerful features of Less : the nested rules. For example, the #header h1 will be defined as h1 within #header, which will look like this :

#header {
	margin: 0;
	width: 100%;
	height: 100px;
	background-color: @middle_color;

	h1 {
		margin: 0;
		font-size: @font_size*3;
		padding: 10px 5px;
		color: @dark_color;
	}
}

It doesn’t really cuts on the size of the file, but it reads easier. And combined with usage of variables, we get the following file :

/* variables */
@font_size: 12px;
@dark_color: #000;
@intense_color: #666;
@middle_color: #ccc;
@menu_color: #ddc;
@block_color: #ccd;
@article_color: #ddf;

/* Take care of padding */
body,div,p,ul,li,table,tr,td, h1 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Nested styles */
body {
	margin: 0;
	padding: 0;
	font: @font_size normal Arial, Sans-serif;
	color: @intense_color;

	#header {
		margin: 0;
		width: 100%;
		height: 100px;
		background-color: @middle_color;

		h1 {
			margin: 0;
			font-size: @font_size*3;
			padding: 10px 5px;
			color: @dark_color;
		}

		ul {
			position: absolute;
			top: 60px;
			left: 0;
			margin: 0;
			padding: 0;
			list-style-type: none;
			width: 100%;
			background-color: @menu_color;

			li {
				float: left;
				padding: 10px;
				width: 25%;
				height: 40px;
				border-left: 1px solid @intense_color/2;
				text-align: center;
				font-size: @font_size*1.5;
			}
		}
	}

	#sidebar {
		float: left;
		padding: 10px 20px;
		width: 25%;
		top: 0;
		bottom: 0;

		.block {
			text-align: justify;
			margin-bottom: @font_size;
			background-color: @block_color;
			padding: 0 5px 10px 5px;
			border-radius: 5px;
			-moz-border-radius : 5px;
			-webkit-border-radius: 5px;

			h1 {
				font-size: @font_size*1.5;
			}
		}
	}

	#container {
		float: left;
		width: 75%;
		padding: 10px 20px;

		.article {
			font-size: @font_size*1.25;
			text-align: justify;
			margin-bottom: @font_size*1.25;
			background-color: @article_color;
			padding: 0 10px 20px 10px;
			border-radius: 10px;
			-moz-border-radius : 10px;
			-webkit-border-radius: 10px;

			h1 {
				font-size: @font_size*2;
				padding-left: 20px;
				border-left: 4px solid #666;
			}
		}
	}
}

It looks like this (oh, wow) :
La version Less

 Same, right ?!

And that’s pretty much all you need to know about nested rules.

In the next topic, we’ll talk about functions in Less, as well as Client Side and Server Side usage (and, if you behave, we’ll talk about the Less compiler LessC and when to use it)

Les commentaires sont fermés.