LESS

LESS is a way to simplify your CSS and take it to a more powerful level.

The first time I saw it I thought it was going to be a nightmare. But as I began to use it and learned the simple syntax heirarchy, I can't stand going back to regular CSS.

It saves SO much time. Instead of having to write specific classes each time (we all know the importance of specificity so we're not accidentally styling or breaking other elements and making JS targeting super-easy):

An example of too much CSS from the Vulcan Kitchen Equipment Guide

/* CSS Document */

#esg #results_footer ul#other_equipment li div.icon{
	background-color: #111;
	background-position: center center;
	background-size: contain;
	background-attachment: scroll;
	width: 80px;
	height: 80px;
	float: left;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: block;
	z-index: 1;
	-webkit-transition: all 550ms cubic-bezier(0.645, 0.045, 0.355, 1);
   -moz-transition: all 550ms cubic-bezier(0.645, 0.045, 0.355, 1);
   -o-transition: all 550ms cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: all 550ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

#esg #results_footer ul#other_equipment li:hover div.icon{
	width: 90px;
	height: 90px;
}

#esg #results_footer ul#other_equipment li.fryers div.icon{
	background-color: #ca2125;
	background-image: url(/kitchen-equipment-guide/images/icon-fryers.png);
}

#esg #results_footer ul#other_equipment li.steamers div.icon{
	background-color: #009f19;
	background-image: url(/kitchen-equipment-guide/images/icon-steamers.png);
}

#esg #results_footer ul#other_equipment li.griddles div.icon{
	background-color: #cf4025;
	background-image: url(/kitchen-equipment-guide/images/icon-griddles.png);
}

#esg #results_footer ul#other_equipment li.charbroilers div.icon{ 
	background-color: #cf4025;
	background-image: url(/kitchen-equipment-guide/images/icon-charbroilers.png);
}

#esg #results_footer ul#other_equipment li.ranges div.icon{
	background-color: #4793ea;
	background-image: url(/kitchen-equipment-guide/images/icon-ranges.png);
}

#esg #results_footer ul#other_equipment li.quote div.icon{
	background-color: #ee293c;
	background-image: url(/kitchen-equipment-guide/images/icon-quote.png);
}

That same code, but in LESS

/* LESS Document */


#esg{
	#results_footer{
		ul#other_equipment{
			li{
				.icon{
					background-color: @DarkGray;
					background-position: center center;
					background-size: contain;
					background-attachment: scroll;
					width: 80px;
					height: 80px;
					float: left;
					position: relative;
					margin: 0px 0px 0px 0px;
					padding: 0px 0px 0px 0px;
					display: block;
					z-index: 1;
					-webkit-transition: @TransitionVariable;
				   -moz-transition: @TransitionVariable;
				   -o-transition: @TransitionVariable;
				   transition: @TransitionVariable;
				}
				&:hover{
					.icon{
						width: 90px;
						height: 90px;
					}
				}
				&.fryers{
					.icon{
						background-color: #ca2125;
						background-image: url(/kitchen-equipment-guide/images/icon-fryers.png);
					}
				}
				&.steamers{
					.icon{
						background-color: #009f19;
						background-image: url(/kitchen-equipment-guide/images/icon-steamers.png);
					}
				}
				&.griddles{
					.icon{
						background-color: #cf4025;
						background-image: url(/kitchen-equipment-guide/images/icon-griddles.png);
					}
				}
				&.charbroilers{
					.icon{
					background-color: #cf4025;
					background-image: url(/kitchen-equipment-guide/images/icon-charbroilers.png);
					}
				}
				&.ranges{
					.icon{
						background-color: #4793ea;
						background-image: url(/kitchen-equipment-guide/images/icon-ranges.png);
					}
				}
				&.quote{
					.icon{
						background-color: #ee293c;
						background-image: url(/kitchen-equipment-guide/images/icon-quote.png);
					}
				}
				//li
			}
		}
	}
	
	//esg
}

It may not look like "less" in this example, but writing, debugging and mainting the code is far easier. The added flexibility to go back and edit, customize individual items and more as you're working makes it leaps and bounds ahead of normal CSS. You no longer have to rewrite long nested identifiers. Had to change a parent somewhere? Easily add a new parent, open and close bracket and nest all the children instead of having to go back line by line and update every item.

If you're smarter than me, you can use LESS.js to implement on your own, or your favorite CMS should have a plugin for it. For WordPress, I use WP-LESS as it's lightweight and allows the declaration of variables inside functions.php.

The best part is, that at it's core, it's CSS. So believe it or not, you know LESS already and so does Dreamweaver.

Now, let's get into some cool features of LESS...