LESS

LESS расширяет синтаксис CSS, например, позволяет использовать переменные и функции.

Переменные

Переменные в LESS создаются через символ @.

@font: Verdana;
@color-red: #FF0000;

p {
    font-family: @font;
}

.error {
    color: @color-red;
}

В результате будет сгенерирован CSS-код:

p {
    font-family: Verdana;
}

.error {
    color: #FF0000;
}

Переменные можно создавать или переопределять в любом месте кода.

Наследование

.article {
    padding: 5px;

        .title {
            font-weigth: bold; 
        }

        .content {
            font-size: 16px; 
        }

}

В результате буде сгенерирован следующий код:

.article {
    padding: 5px;
}

.article .title {
    font-weight: 700;
}

.article .content {
    font-size: 16px;
}

Цветовые функции

В LESS есть функции lighten() и darken(), которые позволяют сделать текущий свет ярче или темне.

@color-red: #FF0000;

p {
    /* сделать цвет светлее на 30% — color: #ff9999 */
    color: lighten(@color-red, 30%);
  
    /* сделать цвет темнее на 30% — color: #660000; */
    background: darken(@color-red, 30%);
}