—»     —»   Изучаем LESS: введение
  Раздел: Образование и Изучение, CSS/Style Sheets   Комментариев: 2  

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



Сегодня мы начинаем серию статей, посвященных технологии LESS – динамическому языку, который использует CSS-код и, так сказать, накачивает его стероидами. LESS позволяет вам использовать переменные, mixin’ы, разветвленные правила и даже функции прямо внутри кода CSS. Это поможет вам в значительной степени ускорить процесс разработки и улучшить качество проектов. Конечно же, как и в любом деле, вам потребуются некоторые знания, но как только вы поймете суть данной технологии, вам вряд ли снова захочется использовать чистый код, без применения LESS.

Изучаем 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. До встречи!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, LESS
Опубликовал Design FactoRy   Прочитано (раз): 10337   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 10 декабря 2012 @ 20:19
Написал: Виталя — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
О чём статья - непонятно
Комментарий #2: 10 декабря 2012 @ 20:23
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Виталя, что именно вам непонятно?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930