LESS Css...finally

Less.css can be compiled on the client side or server side. Most likely, I'm going to want to be compiling less.css on the server side.

So what makes less allow you to write...less?

Well, variables for one. Let's take a looky-look:

@header-font: Georgia;
h1, h2, h3, h4 {
        font-family: @header-font;
}
.large {
        font-family: @header-font;
}

One of the best uses for variables is using it to define colors. You can also perform basic operations.

Nesting

article.post {
    p {
        margin: 0 0 12px 0;
    }
    a {
        color: red;
    }
    a:hover {
        color: blue;
    }
    img {
        float: left;
    }
}

I can do the above and not have to prefix each element/selector with article.post

Mixins

.rounded_top {
    -webkit-border-top-left-radius: 6px
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-top: 6px;
    -border-top-left-radius: 6px;
    -border-top-right-radius: 6px;
}

.tab {
    background: #333;
    color:#fff;
    .rounded_top;
}

.submit {
    .tab;
    background: red;
}

Mixins allow you to define and reuse classes. Very useful for things such as buttons, rounded corners, notches, etc.

Parametric Mixins

.rounded_top(@radius:6px) {
    -webkit-border-top-left-radius: @radius;
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-top: @radius;
    -border-top-left-radius: @radius;
    -border-top-right-radius: @radius;
}

.tab {
    background: #333;
    color:#fff;
    .rounded_top;
}

.submit {
    .rounded_top(3px);
    background: red;
}

This basically allows you to declare function-like statements. In the example above, 6px is the default value for rounded top if none is specified. Otherwise, it takes in the parameter for rounded top. You can have multiple parameters to define more complex mixins.

Namespaces

When starting work on a new site (i.e. for A/B testing), I can use this technique and use it without messing up any other styles I have already or want to add in the future.

#my_framework {
    p {
        margin: 12px 0;
    }
    a {
        color:blue;
        text-decoration:none;
    }
    .submit {
        background: red;
        color: white;
        padding: 5px 12px;
    }
}

.submit_button {
    #my_framework > .submit;
}

This technique is also good for quick theme changing and modification. IF you develop a theme as a template, you can include them as bundles in the same LESS file and use the one you need:

#fw_1 {
    p {
        margin: 12px 0;
    }
    a {
        color: blue;
        text-decoration: none;
    }
    .submit {
        background: red;
        color: white;
        padding: 5px 12px;
    }
}

#fw_2 {
    p {
        margin: 8px 0;
    }
    a {
        color: red;
        text-decoration: underline;
    }
    .submit {
        background: blue;
        color: white;
        padding: 8px 20px;
    }
}

 .submit_button {
    #fw_2 > .submit;
}

String Interpolation

Strings can be stored in variables and then used inside property values

@url: "http://mycompany.com/assets/";background-image: url("@{url}/sprite.png");

This can be very helpful if we want to use the url of a cdn and keep it in the CSS (where it kind of belongs)