Deprecated: Функция _default_values с версии 4.0.0 считается устаревшей! Используйте options_class->default_values(). in /home/w/webdes38/blog.g-fx.ru/web/wp/wp-includes/functions.php on line 5379 Deprecated: Функция get_options с версии 4.0.0 считается устаревшей! Используйте options_class->get(). in /home/w/webdes38/blog.g-fx.ru/web/wp/wp-includes/functions.php on line 5379 Deprecated: Функция _default_values с версии 4.0.0 считается устаревшей! Используйте options_class->default_values(). in /home/w/webdes38/blog.g-fx.ru/web/wp/wp-includes/functions.php on line 5379 Deprecated: Функция _default_values с версии 4.0.0 считается устаревшей! Используйте options_class->default_values(). in /home/w/webdes38/blog.g-fx.ru/web/wp/wp-includes/functions.php on line 5379 Deprecated: Функция get_options с версии 4.0.0 считается устаревшей! Используйте options_class->get(). in /home/w/webdes38/blog.g-fx.ru/web/wp/wp-includes/functions.php on line 5379 Deprecated: Функция _default_values с версии 4.0.0 считается устаревшей! Используйте options_class->default_values(). in /home/w/webdes38/blog.g-fx.ru/web/wp/wp-includes/functions.php on line 5379 Используем less вместо css стилей — Блог веб-дизайнера
Старт

Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.

Что такое LESS?

LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в CSS. Он вводит переменные, операции, function-like элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.

Как использовать LESS

Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету или скомпилировать его заранее и использовать получившийся CSS файл. Не бойтесь слова «компилировать» (я постоянно его использую), это очень просто.

Используем LESS и Javascript файл

Для начала нужно скачать с сайта LESS Javascript файл и привязать его к страничке как любой другой js скрипт.

<script src="less.js" type="text/javascript"></script>

Затем создадим файл с расширением .less и привяжем его с помощью такого кода:

<link rel="stylesheet/less" type="text/css" href="style.less">

Удостоверьтесь, что вы прикрепили LESS файл перед JS.
Теперь LESS файл будет работать также как и обычный CSS.

Компилируем LESS файл

Хотя этот способ немного утомительней, но иногда он является более предпочтительным.

No Comments

Leave a comment