Mon 09 Nov 2015

LessCSS

Language Features

Variables

@var: value;

Mixins

Define a class or id: 

.thing {
    color: mauve;
}

Then include that class or id somewhere else: 

.some-other-thing {
    font-size: large;
    .thing;
}

Nesting

Follows the chain of selectors down.

& represents the selector of the block we're currently in. 

.foo {
    a: 10;

    /* Thing which is both a .foo and a .bar */
    &.bar {
        b: 20;
    }

    /* .foo inside another .foo */
    .foo {
        x: black;
    }
}

Arthimetic

Can compute some things.

Imports

@import myfile.less