Overslaan en naar de inhoud gaan

Less is More

Ever wondered what all the fuss is about SASS, SCSS and LESS? Today I'd like to introduce LESS and hopefully give some interesting examples.

What is LESS?

LESS is powerful tool for writing short code snippets which are converted to plain CSS. 
So why would you use LESS when the output is still CSS?  
Easy: LESS makes your  CSS consistent and makes it easy to create reusable code. 

To install: please see the documentation at http://lesscss.org

So let's start: I allways forget to use prefixes, luckily in LESS I can write a function/mixin. In short, I declare a function so I can reuse it on elements in my site.

  .box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

You can also pass variables to the mixin, it defaults at 10px when no variables are passed:

  .corner(@radius:10px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
-o-border-radius: @radius; border-radius:
@radius;
}
.first-box {
.corner();
}
.second-box {
.corner(3px);
}

This would output:

  .first-box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.second-box {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}

Lastly, I would like to give a nesting example:

  footer #row.second #navigation {
ul { margin-left:1em; }
li { float:left; }
a { color:#FFF; }
}

/* Output: */

footer #row.second #navigation ul {
margin-left: 1em;
}
footer #row.second #navigation li {
float: left;
}
footer #row.second #navigation a {
color: #FFF;
}

That's only some of the power LESS has, for a reference check: http://lesscss.org/#reference
Next time I'll give some more advanced examples.

Interesse? Neem gerust contact op

Benieuwd wat Guus voor u kan betekenen of gewoon een keertje sparren?
Mail info@guusvandewal.nl of bel 06 48 47 45 71.