Design and Prototyping for Drupal

LessCSS and Less.app

Less (http://incident57.com/less; which you’ll read about in Part III of this book) is a CSS framework that allows you to more efficiently create CSS. In addition to allowing you to set variables and “mixins” for colors, fonts, etc. directly in your stylesheets that can be called anywhere else in the stylesheets, it allows you to nest styles within each other. For example, a simple navigation menu might look like this:

ul#navigation { list-style: none; display: inline; }
ul#navigation > li { list-style: none; float: left; margin-right: 1em; 
    border-right: 1px solid gray; }
ul#navigation > li a { padding: 3px 0; color: black; text-decoration: none;}
ul#navigation > li a:hover { color: white; background: black; 
    text-decoration: underline; }

In Less, you’d style it thus:

ul#navigation {
    list-style: none; display: inline;

    > li {
        list-style: none;
        float: left;
        margin-right: 1em;
        border-right: 1px solid gray;
        padding: 3px 0;

        a {
            padding: 3px 0; color: black; 
            text-decoration: none;
        }

        a:hover {
            color: white; background: black; 
            text-decoration: underline;
        }
    }
}

When this code is compiled, it will compile into the same code as the first example, but you get to save yourself some typing and keep all your code for a given element organized in one place. This is especially useful when working in Drupal, as you’ll often find yourself customizing a much larger amount of CSS for any given area of a site—from a particular page, to a block, to the entire sidebar. You’ll read more ...