Отдел новостей 8 ноября 2011, 17:15

Less или Динамические CSS

В данной статья я решил продемонстрировать нестандартные возможности при работе с CSS, которые позволяют использовать переменные, функции и др., всё то, что не свойственно видеть в обычных каскадных талибах стилей. Это less! Итак, всё начинается с того, нам нужно скачать с http://lesscss.org js- библиотечку, после чего мы её просто подключаем в нашем html коде:


< link href="../../Content/style.less" rel="stylesheet/less" type="text/css" />
<script src="../../Content/less.js" type="text/javascript"></script>

Как уже заметили, теперь мы будем использовать rel="stylesheet/less" и вместо всем нам привычного расширения .css - .less (переименовать уже существующие файлы не составит большой проблемы) Готово! Теперь можно исполь все приемущества: Переменные. Они позволяют не производить дублирование данных, а также используются при работе с функциями..


@color: #4D926F;
#header {
  color: @color;
}

Mixins Дают возможнось использовать заранее подготовленные шаблоны с аргументами. Functions & Operations Less поддерживает арифметические операции и имеет несколько функций для работы с цветом


#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
  border-color: desaturate(@red, 10%);
}

И другогое Как итог, можно сказать, что изначально продуманно разработанный .less может облегчить дальнейшую работу с css, также позволит в более короткие сроки провести редизайн сайта) Плюсы: