Design and Prototyping for Drupal

Why This is Awesome (Aside From the Obvious)

Aside from the sheer volume of code you can prevent yourself from having to write (your carpal tunnel will thank you), one of the things that makes LessCSS especially awesome when you’re working in Drupal is the way it helps you organize your CSS according to parent/child relationships, which is essential to theming in Drupal.

In most cases, when theming Drupal elements, you’ll be theming specific containers—say, all Views of a certain type, or a Featured Content block—and everything within those containers. In standard CSS, it’s very easy to find yourself losing track of where you are in the hierarchy when you start getting into more complex relationships. This is especially true with navigation menus, where you have a multitude of selectors—and their immediate descendants—to deal with. But with LessCSS’s nested styles, you can start from the top down and keep everything in one place. For example, here’s the sample code from our Event page that we did in Chapter 11, Prototyping in the Browser:

/* 6.2 Event Node */

.field-name-field-event-image {
    margin-bottom: 1em;
}

.about-host {
    .user-picture {
        float: left;
        margin-right: .5em;
    }

    h3 {
        margin: 0; padding: 0;
    }
    .username {
        font-size: 1em; line-height: 1.3em;
    }
}

.related-events {
    .views-row {
        margin: 1em 0;
        padding-bottom: .5em;
        border-bottom: 1px dotted @gray;
    }

    h4 {
        margin: 0; padding: 0;
    }

    .date {
        .sans-italic;
        font-size: .85em;
    }

}

Note that each block—.about-host and .related-events ...