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

  • Article

Опубликовано 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; 

  

 }