Изучаем LESS в CSS: Введение

Изучаем LESS в CSS: Введение

От автора: я очень рад начать сегодня серию статей, посвященных LESS, динамическому языку, который значительно расширяет возможности CSS и добавляет в него много свойств. LESS позволяет вам использовать переменные, миксины, вложенные правила и даже функции внутри CSS. Он чрезвычайно эффективен и может значительно ускорить процесс разработки. Конечно, чтобы освоить эту тему, вам потребуется приложить усилия, но как только вы разберетесь в LESS CSS, вы точно никогда больше не захотите работать без него.

План статей серии

Введение

Использование переменных

Использование миксинов

Использование вложенных правил

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Использование функций

Разделяй и властвуй

Применение на практике

Как видите, впереди вас ожидает много чего интересного. Давайте же начнем.

Что такое LESS и зачем он нужен?

За то время, что я занимаюсь разработкой, я обнаружил, что, когда речь заходит о LESS (или любом другом препроцессоре CSS), люди делятся на три типа. Есть люди, типа Я никогда о нем не слышал, другой тип –Да, я пробовал, но это не моё, и третий тип – О, да! Я его обожаю!

Цель этой серии – сделать так, чтобы вы оказались в третьей категории.

Согласно Википедии, LESS: это динамический язык стилей, который разработал Алексис Селлье (Alexis Sellier). Он был создан на основе языка стилей Sass и, в свою очередь, оказал влияние на его новый синтаксис “SCSS”, в котором также использован синтаксис, являющийся расширением CSS.

LESS был представлен в 2009 и в последние месяцы получил широкое применение в больших и малых проектах, включая фреймворк Bootstrap от компании Twitter, самый популярный проект на веб-сервисе GitHub.

В ходе ознакомления со статьями этой серии вы сможете лучше уловить суть того, что же такое на самом деле LESS и как его можно использовать, и в скором времени вы будете в состоянии создать впечатляющую библиотеку переменных, быстрых эффектов CSS3 и многое другое.

Какие материалы есть по этой теме?

Существует множество источников, в которых вы можете прочитать про LESS, первым из них может быть http://lesscss.org, домашняя страница LESS. Этот ресурс поможет вам в установке, работе с кодом, обработке файлов LESS и во многих других вопросах.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Веб-сайт Smashing Magazine тоже опубликовал введение в LESS и его сравнение с SASS, то есть с другим популярным препроцессором CSS.

Также благодаря простому поиску в Google по запросу «LESS» вы можете найти много разных ресурсов, советов и рекомендаций, но ничто не поможет вам лучше освоить LESS, чем если вы сами на практике возьметесь за работу с кодом и изучите все с самого начала.

LESS работает на стороне сервера или клиента?

Хороший вопрос, ответ на него таков: и на той, и на другой. Или же ни на одной из них. Чтобы применить LESS на стороне клиента, нужно сохранять все ваши файлы как type.less и включать их в документ точно так же, как бы вы делали это с файлом CSS.

После того, как вы загрузили все файлы LESS, нужно обратится к файлу LESS JS, который компилирует все ваши файлы в одну таблицу стилей CSS.

И это на стороне клиента! Не забывайте, что нужно обращаться к файлу 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

Источник: http://www.developerdrive.com/

Редакция: Команда webformyself.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий