In this recipe we're going to move away for the moment and focus on a couple of important features of Less that you should be aware of: importing Less or CSS files and escaping non-standard code. Let's take a look at importing files first, using the prebuilt LessElements mixin, which we will use to create a basic alert that you can use in your projects.
For this recipe, you will need to crank up any normal text editor of your choice and visit http://www.lesselements.com to download the prebuilt Less Elements mixin library.
- Let's begin by opening up a text editor of your choice, adding a copy of the template that we created at the start of the chapter, and saving it as
test less import.html. - Now that we have our framework in place, let's go ahead and add in a
<div>tag, which acts as the basis for our alert:<body> <div class="alert"> <p>Hello World! (or, you know, maybe something a bit more pertinent to your site...)</p> </div> </body>
- If you were to look at this in a browser, it's going to look very plain; we can fix that by adding in the CSS; save the following as
test less import.less:@import "elements.less"; .alert { background: ~"#fff6bf url(images/exclamation.png) 15px center no-repeat"; text-align: left; padding: 10px 20px 10px 50px; border-top: 2px solid #ffd324; border- bottom: 2px solid #ffd324; .box-shadow(0 1px 2px #999); Width: 40%; } - Add a link to it from our HTML code:
<link rel="stylesheet/less" type="text/css" href="import.less">
- Save your work and preview it in your browser; if all is well, you should see something like the following screenshot:
Although this is an overly simplified example, it demonstrates perfectly how you can import mixins from established mixin libraries, or even your own, and use them from within your own code. To prove this, have a look at the compiled code from the preceding exercise in something like Firebug; it will show the following code:
.alert {
background: url("images/exclamation.png") no-repeat scroll 15px center #FFF6BF;
border-bottom: 2px solid #FFD324;
border-top: 2px solid #FFD324;
box-shadow: 0 1px 2px #999999;
padding: 10px 20px 10px 50px;
text-align: left;
width: 40%;
}We'll see more examples of this later in the book.
The beauty of LESS is that it will always create a single compiled CSS file, ready for production use. This helps to cut down page load time, as the number of server requests is reduced. You can include any number of LESS files within your main LESS file, allowing you to use a modular approach. Mixins and variables can be separated into separate files for colors, typography, grids, and so on, which you could then reuse in other projects. You can import files using either of the following methods; the .less extension is optional:
@import "typography.less"; @import "typography";
If you want to import a CSS file and don't want LESS to process it, just use the .css extension:
@import "typography.css";
Let's move on and take a look at another part of LESS functionality using JavaScript operators.