Сегодня мы начинаем серию статей, посвященных технологии LESS – динамическому языку, который использует CSS-код и, так сказать, накачивает его стероидами. LESS позволяет вам использовать переменные, mixin’ы, разветвленные правила и даже функции прямо внутри кода CSS. Это поможет вам в значительной степени ускорить процесс разработки и улучшить качество проектов. Конечно же, как и в любом деле, вам потребуются некоторые знания, но как только вы поймете суть данной технологии, вам вряд ли снова захочется использовать чистый код, без применения LESS.
Содержание нашего курса
* Введение
* Использование переменных
* Использование mixin’ов
* Использование разветвленных правил
* Использование функций
* Разделяй и властвуй!
* Применяем на практике
Итак, мы все разложили по полочкам, и теперь вы знаете, чего ожидать в следующих частях нашего руководства. Давайте начнем с введения в LESS.
Что такое LESS и почему меня это должно волновать?
Нарабатывая опыт работы в сфере веб, мы обнаружили, что люди подразделяются на 3 типа, когда дело доходит до LESS (либо до любого другого инструмента предварительной обработки CSS). Среди них: люди, которые никогда не слышали об этом, те, кто попробовали, но считают, что эта технология не для них, и те, кто попробовали и им понравилось.
Цель нашей серии руководств заключается в том, чтобы после прочтения вы удобно расположились в последней группе людей.
Из материалов Wikipedia, LESS – это:
Динамичный язык для разработки каскадных таблиц стилей, созданный Алексисом Селлиером. Он был создан под вдохновением от Sass, и повлиял на обновленный синтаксис Sass под названием «SCS», который перенял его форматирование синтаксиса на примере блоков в CSS.
LESS появился в 2009 году, и в последние месяцы стал стремительно набирать обороты, так как его все чаще и чаще применяют в проектах, как маленьких, так и гигантских, включая Bootstrap из Twitter’а – самый популярный проект на GitHub.
С ознакомлением с новыми сериями этого руководства, вы все ближе и ближе будете узнавать LESS, и как его использовать. Вкратце можно сказать, что он поможет вам создавать мощные библиотеки переменных, быстрые CSS3-эффекты и многое другое.
Какими ресурсами следует воспользоваться?
В интернете есть множество мест, где вы сможете прочитать о LESS, но для начала мы настоятельно рекомендуем вам сосредоточиться на http://lesscss.org, основной забой LESS. Этот ресурс поможет вам изучить настройку, ознакомиться с кодом, а также расскажет вам про обработку LESS-файлов и многом другом.
Ранее мы уже разместили статью Знакомство с LESS и сравнение с Sass – другим популярным инструментом предварительной обработки CSS.
Простой поиск в Google по ключевому запросу выдаст вам множество похожих инструментов, подсказок и трюков, но нет ничего лучше, чем собственноручно покопаться в коде и изучить все с нуля.
Эта технология работает на стороне сервера или клиента?
Хороший вопрос, и вопрос здесь может быть либо «на обеих сторонах», либо «ни на какой».
Для того чтобы применять LESS, используя метод с клиентской стороной, сохраните все ваши файлы как type.less и затем встройте их в документ по тому же принципу, как вы страиваете файлы каскадных таблиц стилей.
<link rel="stylesheet/less" type="text/css" href="type.less">Как только вы загрузите все необходимые LESS-файлы, наступает время вызова файла LESS JS, который компилирует все ваши файлы LESS в одну каскадную таблицу стилей CSS.
<script src="less.js" type="text/javascript"></script>Это то, что требуется для работы на стороне клиента. Удостоверьтесь в том, что вы вызываете файл 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, где его следует сохранить (в вашей папке с разработкой) и нужно ли его минимизировать.
Отличный инструмент, не сомневайтесь!
Так что, выкроите для себя пару минут в день на сегодня, и не забывайте следить за последующими этапами руководства.
В нашем следующем уроке мы будем изучать способы применения переменных в LESS.
