LESS CSS Developer, London

LESS CSS

Less Logo

LESS and SASS are two of the more popular CSS preprocessors.

Here we take a look at the potential advantages that LESS can bring to your CSS coding.

The fundamental aim of LESS is to allow faster and more efficient maintenance of CSS, with larger gains coming for larger websites. Personally, i am not sure either of these CSS processors is necessary for very small websites, but i have tried them both out here in order to carry any experience across to larger sites.

Take a look below at the opportunities given by LESS and then compare with SASS to decide upon which one to go with. Your decision will be down to a matter of taste plus also the specific projects on which you work.

Tools to Compile LESS

Compilation tools, such as Winless, are necessary for converting your LESS files on server side into compiled CSS files, ready for development or production environments. The alternative is to convert on client side via the LESS Javascript.

Nested Selectors for Easier Maintenance

Nested selectors from your LESS file will be far easier to read and maintain, with required output placed into the processed CSS file.

								
								
								#header {
								  h1 {
									font-size: 26px;
									font-weight: bold;
								  }
								  p { font-size: 12px;
									a { text-decoration: none;
									  &:hover { border-width: 1px }
									}
								  }
								}

Variables for Faster Maintenance

Variables offer a great way of handling global items such as colours. Variables are declared and then re-used across other selectors, meaning they need only be changed in one place. You can also override variables locally.

								
								
								@color: #4D926F;
								#header { color: @color; }
								h2 { color: @color; }

Import Classes Directly

Import variables and even classes directly into other selectors. This can save time in maintenance and also leave your SASS file cleaner.

								
								
								.rounded-corners {
									-webkit-border-radius: 5px;
									-moz-border-radius: 5px;
									border-radius: 5px;
								}
								#login-box { .rounded-corners; }

Simple Mathematical Operations

Set padding and margins from initial presets, with small tweaks directly from mathematical operations.

								
								
								@base-margin: 25px;
								#header { margin-top: @base-margin + 10px; }

Namespaces and Accessors

Group and recall variables or mixins through the method below.

								
								
								#defaults {
								  @heading-color: #EE3322;
								  .bordered { border: solid 1px #EEE; }
								}
								
								h1 {
								  color: #defaults[@heading-color];
								  #defaults > .bordered;
								}
								
								h1 { color: red; }
								.sidebar_heading { color: h1['color']; }

Personal Less Project

Further Reading on LESS CSS

Leave a Reply

Your email address will not be published. Required fields are marked *