CULTURE / CODE / CHANGE

interweb hyperlinking, est MMXI

by

Emanuel Schwarz

  1. Getting started with Less.

    I came across less - a CSS extension by Alexis Sellier (better known as cloudhead) - quite a few times last year but I’ve refrained from using it, even though I immediately understood it’s great potential. I had that wired thought that I needed to develop my CSS skills at least to a level where I could take advantage of all the fancy stuff one can do with less.

    But now that I started looking into it I must says that I’ve been a total fool. I should have started using it way earlier. Being able to insert variables into my CSS is a total time saver! Why remeber and repeat

    /* CSS */
color: #dedede;

    every time you want to have the color gray to appear somewhere? Or worse: What happens if you want to change that exact color that probably appears quite a few times in your stylesheet?

    Defining the color as a variable once and inserting it where needed makes just so much more sense.

    // Less
@gray: #deded; 

#header {
    color: @gray; }

#footer {
    color: @gray; }

    And it gets even better with Mixins – a way to embed all properties of a given class or id into another.

    // Less
.border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius; }

#header {
    .border-radius(4px); }

    It’s powerful stuff, really. And I haven’t even looked into functions and operations yet… I’m so excited to develop my next project with it.

    • ∞
    • / 27.1.2012 /
    • 2 ♥ /
    1. culturecodechange posted this