LESS to CSS Compiler Overview

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS.

Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.

Demo code to try

Input

.component {
    width: 300px;
    @media (min-width: 768px) {
        width: 600px;
        @media  (min-resolution: 192dpi) {
            background-image: url(/img/retina2x.png);
        }
    }
    @media (min-width: 1280px) {
        width: 800px;
    }
}

Output

.component {
    width: 300px;
}
@media (min-width: 768px) {
    .component {
        width: 600px;
    }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
    .component {
        background-image: url(/img/retina2x.png);
    }
}
@media (min-width: 1280px) {
    .component {
        width: 800px;
    }
}