Your first layout in Less

You must first open first.html (from the downloadable files for the book) in your browser and then open less/first.less in your text editor. In your browser, you will see a representation of a header, body, and footer.

As expected, less/first.less contains the Less code that will be converted into valid CSS by the less.js compiler. Any error in this file will stop the compiler and throw an error. Although the Less code shows some similarities to the plain CSS code, the process described here totally differs from editing your CSS directly.

The following screenshot shows you how this layout will look when opened in your web browser:

Your first layout in Less

Vendor-specific rules

CSS3 introduced vendor-specific rules, which offer you the possibility of writing some additional CSS applicable for only one browser. At first sight, this seems the exact opposite of what you want. What you want is a set of standards and practicalities that work the same with every browser and a standard set of HTML and CSS which has the same effect and interpretation for every browser. These vendor-specific rules are intended to help us reach this utopia. Vendor-specific rules also provide us with early implementations of standard properties and alternative syntax. Last but not least, these rules allow browsers to implement proprietary CSS properties that would otherwise have no working standard (and may never actually become the standard).

For these reasons, vendor-specific rules play an important role in many new features of CSS3. For example, animation properties, border-radius, and box-shadow all depend on vendor-specific rules.

Vendors use the following prefixes:

• WebKit: -webkit

• Firefox: -moz

• Opera: -o

• Internet Explorer: -ms

Build rounded corners with border-radius

Border-radius is a new CSS3 property which will make many web developers happy. With border-radius, you can give HTML elements a rounded corner. In previous years, many implementations of rounded corners using images and transparency have been seen. However, these were inflexible (not fluid) and difficult to maintain.

Vendor-specific rules are required for implementation, and although rounded corners can't be handled with a single line of code, its usage definitely makes rounding corners a lot easier.

To give an element rounded corners with a radius of 10 pixels, you can use the CSS code with vendor-specific rules as follows:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

For rounded corners with different radii, use a list with values separated by spaces: 10 px 5px 20px 15px;. The radii are given in the following order: top-left, top-right, bottom-right, and bottom-left. By keeping these rules in mind, you will see how Less can keep your code clean.

You can open roundedcorners.html from the download section of this chapter in your browser, and open less/roundedcorners.less in your text editor. In your browser, you will see a representation of a header, body, and footer with rounded corners.

The CSS for the header in less/roundedcorners.less looks like the following code:

#header{
background-color: red;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

You can see that using vendor-specific rules, the corners have been created with a radius of 10 pixels. If you were using CSS, you would have to repeat the vendor-specific rules three times for the header, footer, and body. In order to change these rules or add a vendor, you would also have to change the same code three times. To begin with, you will perhaps think, "Why not group the selectors?", in a fashion similar to the following code:

#header, #content, #footer{
-webkit-border-radius: 10px;
-moz-border-radius: 10;
border-radius: 10px;
}

The preceding code is syntactically correct in order to write CSS or Less code, but as your code base grows, it won't be easy to maintain. Grouping selectors based on properties makes no sense when reading and maintaining your code. Such constructs will also introduce many duplicated and unstructured usages of the same selectors.

With Less, you are able to solve these problems efficiently. By creating a so-called mixin, you can solve the issues mentioned earlier. For the border radius, you can use the following code:

.roundedcornersmixin()
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

To use this mixin, you will call it as a property for the selector using the following code:

#header{
background-color: red;
.roundedcornersmixin();
}

The compiled CSS of this Less code will now be as follows:

#header{
background-color: red;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Looking at the original code in the less/roundedcorners.less file, you can see that the preceding code wouldn't be able to work for #content. The border radius for the content is 20 pixels instead of 10 pixels, as used for the header and footer. Again, Less helps us solve this efficiently. Mixins can be called with parameters in the same way in which functions can be called in functional programming. This means that in combination with a value and a reference for this value, mixins can be called in order to set the properties. In this example, this will change to the following code:

.roundedcornersmixin(@radius: 10px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

In the .roundedcornersmixin(@radius: 10px) mixin, @radius is our parameter, and its default value will be 10px.

From this point onwards, mixins can be used in your code. The .roundedcornersmixin(50px); statement will set the corners with a radius of 50px and the .roundedcornersmixin(); statement will do the same with a radius of 10px (default).

Using this, you can rewrite less/roundedcorners.less so that it changes to the following code:

/* mixins */
.roundedcornersmixin(@radius: 10px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header{
background-color: red;
.roundedcornersmixin();
}
#content{
background-color: white;
min-height: 300px;
.roundedcornersmixin(20px);
}
#footer{
background-color: navy;
.roundedcornersmixin();
}

Tip

The less/roundedcornersmixins.less file from the downloads section contains a copy of this code. To use this, you also have to change the reference in your HTML file to <link rel="stylesheet/less" type="text/css" href="less/groundedcornersmixins.less" />.

Note that this code leaves out the general styling of the div and body tags in the HTML. These styles are only used to make the demo look good and do not actually demonstrate Less in any useful manner.

After rewriting your Less code, reload your browser or watch it if you have applied the #!watch trick. You will see that the output will be exactly the same. This shows you how to get the same results with Less using a more efficiently structured code.