Используйте LESS, чтобы упростить CSS!

Опубликовано 11 декабря 2009 10:16 | Coding4Fun |

Читая статью Фила Хаака (Phil Haack) (EN), я узнал об одной изящной технологии под названием LESS, которая помогает сократить объем CSS и уменьшить количество дублирующегося кода. Изначально она была одним из пакетов (gems) языка Ruby, но теперь портирована на платформу .NET и переименована в .Less (доступна на сайте www.dotlesscss.com).

Эта технология позволяет делать потрясающие вещи, в том числе вносить глобальные изменения и даже выполнять операции над элементами CSS!

Переменная :

 @brand_color: #4D926F;

 #header {

 color: @brand_color;

 }

 h2 {

 color: @brand_color;

 }

Операция :

 @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; 

 }