От автора: я очень рад начать сегодня серию статей, посвященных LESS, динамическому языку, который значительно расширяет возможности CSS и добавляет в него много свойств. LESS позволяет вам использовать переменные, миксины, вложенные правила и даже функции внутри CSS. Он чрезвычайно эффективен и может значительно ускорить процесс разработки. Конечно, чтобы освоить эту тему, вам потребуется приложить усилия, но как только вы разберетесь в LESS CSS, вы точно никогда больше не захотите работать без него.
План статей серии
Введение
Использование переменных
Использование миксинов
Использование вложенных правил
Использование функций
Разделяй и властвуй
Применение на практике
Как видите, впереди вас ожидает много чего интересного. Давайте же начнем.
Что такое LESS и зачем он нужен?
За то время, что я занимаюсь разработкой, я обнаружил, что, когда речь заходит о LESS (или любом другом препроцессоре CSS), люди делятся на три типа. Есть люди, типа Я никогда о нем не слышал, другой тип –Да, я пробовал, но это не моё, и третий тип – О, да! Я его обожаю!
Цель этой серии – сделать так, чтобы вы оказались в третьей категории.
Согласно Википедии, LESS: это динамический язык стилей, который разработал Алексис Селлье (Alexis Sellier). Он был создан на основе языка стилей Sass и, в свою очередь, оказал влияние на его новый синтаксис “SCSS”, в котором также использован синтаксис, являющийся расширением CSS.
LESS был представлен в 2009 и в последние месяцы получил широкое применение в больших и малых проектах, включая фреймворк Bootstrap от компании Twitter, самый популярный проект на веб-сервисе GitHub.
В ходе ознакомления со статьями этой серии вы сможете лучше уловить суть того, что же такое на самом деле LESS и как его можно использовать, и в скором времени вы будете в состоянии создать впечатляющую библиотеку переменных, быстрых эффектов CSS3 и многое другое.
Какие материалы есть по этой теме?
Существует множество источников, в которых вы можете прочитать про LESS, первым из них может быть //lesscss.org, домашняя страница LESS. Этот ресурс поможет вам в установке, работе с кодом, обработке файлов LESS и во многих других вопросах.
Веб-сайт Smashing Magazine тоже опубликовал введение в LESS и его сравнение с SASS, то есть с другим популярным препроцессором CSS.
Также благодаря простому поиску в Google по запросу «LESS» вы можете найти много разных ресурсов, советов и рекомендаций, но ничто не поможет вам лучше освоить LESS, чем если вы сами на практике возьметесь за работу с кодом и изучите все с самого начала.
LESS работает на стороне сервера или клиента?
Хороший вопрос, ответ на него таков: и на той, и на другой. Или же ни на одной из них. Чтобы применить LESS на стороне клиента, нужно сохранять все ваши файлы как type.less и включать их в документ точно так же, как бы вы делали это с файлом CSS.
|
1 |
<link rel="stylesheet/less" type="text/css" href="type.less"> |
После того, как вы загрузили все файлы LESS, нужно обратится к файлу LESS JS, который компилирует все ваши файлы в одну таблицу стилей CSS.
|
1 |
<script src="less.js" type="text/javascript"></script> |
И это на стороне клиента! Не забывайте, что нужно обращаться к файлу the less.js после того, как вы добавите таблицу стилей .less.
Я не буду вдаваться в подробности того, как установить LESS на стороне сервере просто потому, что я не очень много работаю на стороне сервера и не хотел бы вводить вас в заблуждение. Вместо этого, я подробно рассмотрю третий метод, который я очень рекомендую. Работать ни на той, ни на другой стороне.
Использование LESS.APP для MAC OS X
Одним из наиболее авторитетных клиентов, используемых мною при написании кода в LESS, является приложение LESS.app для Mac OS X (Извините меня, пользователи Microsoft – просто попробуйте SimpLESS). С помощью LESS.app происходит компиляция файлов LESS в таблицу стилей CSS и даже появляется возможность выполнить минимизацию CSS, чтобы уменьшить размер файла. Это делает создание стилей неимоверно эффективным, потому что вы можете использовать десятки файлов LESS, компилировать их в одну таблицу стилей, выполнять минимизацию и публиковать их на сервере.
Для того, чтобы использовать LESS.app, просто перетащите свою папку с рабочим кодом в окно приложения и LESS.app автоматически найдет ваши файлы LESS. Потом можно уточнить, какие именно файлы вы хотите конвертировать в CSS, куда их нужно сохранить (в рабочей папке) и нужно ли выполнять минимизацию CSS. Крутая вещь, определенно.
Итак, уделите несколько минут сегодня и в будущем тому, чтобы разобраться в LESS и LESS.app, и изучить некоторые материалы по этой теме. Следующая статья этой серии будет посвящена Применению переменных. До скорого.
Автор: Alex Ball
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.
