LESS ("Dynamic CSS")

Вам когда нибудь хотелось заюзать переменные в CSS? или сделать наследование стилей, или даже более того - заюзать какие-то стили как функции?

оказывается это возможно, как минимум на этапе проектирования (браузеры то получат нормальные стили :) )

вот мой вольный пересказ странички http://lesscss.org/

Переменные

Переменные позволяют вам использовать ранее определенные значения повторно по всей таблице стилей, объявление глобальных переменных так же просто, как изменение одной строки кода (мое примечание: скорее это не переменные, а – константы, и объявление действительно занимает одну строчку):

@brand_color: #4D926F; // объявили переменную

#header {
color: @brand_color; // заюзали
}
h2 {
color: @brand_color;
}

Mixins

Mixins позволяет внедрить все свойства другого класса в новый класс, лишь включив имя класса в качестве одного из свойств. использование включений так же просто как и использование переменных (просто в тело класса через точку пишем имя родительского класса). Mixins может также как, например, функции принимать аргументы, как показано в примере ниже:

// наш родительский класс/функция
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

// наследуем #header от .rounded_corners
#header {
.rounded_corners;
}

// наследуем #header от .rounded_corners и переопределяем для него переменную @radius значением 10px, согласитесь – ну удобно же :)
#footer {
.rounded_corners(10px);
}

Nested Rules (или - Вложение правил)

Вместо того, чтобы писать длинные имена селекторов для определения вложенности элементов можно просто напросто описывать стили дочерних элементов внутри стиля родительского элемента:

#header {
color: red;
a { // повлияет на все теги <a, лежащие внутри #header
font-weight: bold;
text-decoration: none;
}
}

ну просто замечательно, не так ли? на мой взгляд гораздо увеличивается удобочитабельность

Операции

Некоторые элементы должны быть пропорциональны относительно других элементов? Так вуаля – операции вам позволяют умножать, делить, прибавлять и вычитать значения свойств и цветов, позволяя вам легко и просто создавать сложные зависимости между элементами страницы

@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer {
color: (@base-color + #111) * 1.5;
}

Тут пересказ заканчивается, на сайте есть линки на скачивание манов и проекта для Ruby, для .NET платформы скачать пример и библиотеку можно тут, и почитать тут