In the web world, LESS and Bootstrap are major tools in the developer's toolkit. If you haven't heard of them or have not had the chance to use them, I highly recommend it. They will make your web development process extremely easier. But as with anything, there's a learning curve. There are detailed documentation on their respective sites, but really, ain't nobody got time for that. This article is the first of a two-part series the outlines what you need to know to start using these in your development. Because Bootstrap utilizes LESS, I'll cover LESS first.
But first some background…
LESS was created in 2009, so it's been around for a while. It's a CSS pre-processor. This means it extends the functionality of CSS allowing the user to keep things DRY, maintainable, and readable. The great thing about LESS is that if you know CSS you can already write valid LESS code because valid CSS is valid LESS. But once you get past that, the fun really starts. Below are 5 things that'll help you hit the ground running.
- Download the Web Essentials Visual Studio extension. Here at Exsilio, Visual Studio is the IDE of choice and Web Essentials is practically a must-have. Aside from the many other benefits it adds to VS, it allows for easier development of LESS. The most important is the preview pane for the compiled CSS and the ability to compile automatically when building the project or saving the LESS file. A major bonus is that you'll know immediately when your LESS is invalid because when it compiles unsuccessfully, the preview pane will display an error message.
- Use variables. Here is where we can get things DRY. Variables are declared with the @ character. These are great for defining colors and any numeric values that will be used in other parts of the file. For example we can declare @orange: #FF5300; and then use it with font-color: @orange;. I make it a point to set all colors to a variable. There should be no hard-coded hex or RGB values strewn throughout the file. As for numbers, I only set important values to a variable such as the width of the page or height of the footer.
- Know the syntax. Pretty useless tip, I know. But I'm specifically referring to one syntactic rule. It is when to use the & character. One of the beauties of LESS is the ability to nest styles. So something in LESS like this:
Will compile into
But if we had
It will compile into
Notice there's no space between .header and .navigation. You must use & when you're defining styles for things like :hover or other pseudo-classes.
- Use mixins. The concept of mixin is a powerful one. It also facilitates code reuse. It's best to explain this concept with an example. Below, .window is being used as a mixin inside .small-window.
The compiled CSS is
Pretty cool right? Another step towards DRY.
- Use (reference) when importing a LESS file. LESS allows you to import either a CSS file or another LESS file. The benefit of importing a LESS file is so you can include styles defined in the imported LESS as mixins. This is great because, again, it facilitates reuse. By default an imported LESS file gets compiled into the calling file. This gets to be an issue when you're importing a large file like the one that comes with Bootstrap. This can sometimes slow your compile time and gets especially irritating when you save often..you do save often right? But by specifying (reference) like so
The styles defined in bootstrap.less will not be included in your compiled CSS unless it has been used as a mixin in your LESS file.
These 5 tips should help you dive head first into LESS. In part 2, we’ll go over Bootstrap, how it utilizes LESS, and what it brings to the UI table.