—»     —»   Эффективная работа с LESS: советы и инструменты
  Раздел: Образование и Изучение, CSS/Style Sheets   Комментариев: 5  

Эффективная работа с LESS: советы и инструменты



В нашем предыдущем руководстве мы изучили работу с LESS на практике – использовали приложения вроде ChrunchApp для компиляции кода. На этот раз мы поделимся с вами полезными советами о том, как улучшить производительность и продуктивность при компилировании синтаксиса LESS. Мы оснастим нашу настольную рабочую среду подсветкой синтаксиса в текущем редакторе, а также воспользуемся инструментом автоматической компиляции и используем шаблоны миксинов, а затем всё это вместе синхронизируем.

Итак, если вы готовы, давайте приступим.

Эффективная работа с LESS: советы и инструменты

Дисклеймер: ниже описанные советы родились в свете личных ежедневных экспериментов. Так что, хотелось бы сразу обозначить тот факт, что эти советы кому-то могут подойти, а кому-то не понравятся. Примерно как в случае и с любыми другими советами, найденными в интернете. Тем не менее, мы надеемся, что вы сможете почерпнуть что-нибудь полезное из этой статьи.

1. Code Highlighter

Как уже было отмечено выше, мы познакомили вас с ChrunchApp. Тем не менее, это приложение вряд ли будет использовать каждый веб-дизайнер, так как каждый дизайны привык к своей собственной среде разработки, которая включает также и любимый редактор кода.

Вместо того чтобы устанавливать еще один редактор кода, вы можете использовать текущий, но добавить в него подсветку синтаксиса. Итак, в сегодняшнем руководстве мы хотим поделиться с вами информацией о том, как добавить подсветку кода LESS в два самых известных текстовых редактора: Sublime Text 2 и Notepad++.

1.1 Sublime Text 2

Этот редактор сегодня используют многие дизайнеры для компилирования кода. Это приложение доступно на Windows, Linux и OSX, и любой другой ОС. Вы можете без сомнения использовать это руководство для настройки.

Эффективная работа с LESS: советы и инструменты

Сейчас давайте скачаем версию с официального веб-сайта и опробуем сам редактор. Затем, ознакомьтесь со следующими инструкциями, которые помогут вам включить цветную подсветку кода LESS.

Примечание: пожалуйста, убедитесь, что вы ознакомились с условиями лицензии перед тем, как скачивать, так как бесплатная версия рассчитана только на ознакомление.

Консоль набора установки

Сначала откройте Sublime Text 2 и отобразите Консоль посредством данного меню View > Show Console

Эффективная работа с LESS: советы и инструменты

Затем, скопируйте и вставьте следующую командную строку в консоль, нажмите Enter для того, чтобы установить пакет управления с wBond.net:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Эффективная работа с LESS: советы и инструменты

Эта консоль поможет нам установить пакет подсветки.

Устанавливаем пакет подсветки LESS

Перезагрузите Sublime Text 2 и отобразите палитру команд (Command Palette) посредством данного меню Tools > Command Palette. Подождите, пока загрузится весь список пакетов. Затем впишите Install Package в поиск и загрузите хранилище пакетов загрузки.

Эффективная работа с LESS: советы и инструменты

Затем, в списке репозитория найдите пакет LESS, и нажмите Enter.

Эффективная работа с LESS: советы и инструменты

Подождите, пока Sublime Text 2 скачает и установит пакет. Должно появиться оповещение.

Эффективная работа с LESS: советы и инструменты

Пройдите в меню View > Syntax, и там, в списке, можно будет увидеть LESS. Это означает, что Sublime Text 2 поддерживает .less и ваш синтаксис LESS теперь также должен подсвечиваться.

Эффективная работа с LESS: советы и инструменты

1.2 Notepad++

Notepad++ – это бесплатный редактор кода с открытым исходным кодом, для которого существует множество плагинов, посредством которых можно расширить его функционал. Он также широко распространен среди веб-дизайнеров/разработчиков, особенно среди тех, кто работает с ОС Windows. Итак, мы решили и его включить в нашу сегодняшнюю статью.

Эффективная работа с LESS: советы и инструменты

Установка подсветки кода LESS в Notepad++

Это делается довольно просто.

Сначала нужно скачать пакет LESS для Notepad++ по этой ссылке (userDefineLang_LESS.xml). Затем пройти в меню View > User-Defined Dialogue.

Эффективная работа с LESS: советы и инструменты

Перед вами появится следующее всплывающее окно. Нажмите на кнопку Import, а затем укажите ваш скачанный .xml-файл. Затем перезагрузите Notepad++.

Эффективная работа с LESS: советы и инструменты

Откройте ваш файл .less и пройдите в меню языков (Languages). Теперь вы можете видеть, что LESS также включен в список. Выберите его и включите цветовую подсветку синтаксиса LESS.

Эффективная работа с LESS: советы и инструменты

1.3 Больше ресурсов

На рынке есть и множество других редакторов. И здесь мы приводим вам несколько полезных ссылок, если вы до этого не были знакомы с этими редакторами.

Adobe DreamWeaver

Нет сомнений в том, что Dreamweaver имеет огромную базу пользователей. Есть версии как для Mac, так и для Windows. Так что, если вы используете данный редактор, мы предлагаем вам отличную статью о том, как осуществить подсветку синтаксиса LESS в Adobe DreamWeaver.

Coda

Если вы используете Mac, то наверняка знаете о Coda – этот редактор считается одним из самых популярных среди пользователей Mac. И здесь вы можете научиться включать подсветку LESS в Coda.

Geany

Это один из самых популярных редакторов кода среди пользователей Linux. Некоторые компьютеры в нашем офисе (которые работают на Linux) оборудованы именно этим редактором. Так что, если вы пользуетесь им, соответствующую инструкцию по осуществлению подсветки LESS можно прочесть на SuperUser.com

2. LESS Compiler

В отличие от ChrunchApp со встроенным LESS compiler, другие редакторы не оборудованы им по умолчанию. Поэтому мы хотим предложить вам несколько способов интеграции его в редакторы. Лучшее решение, с которым нам довелось познакомиться, это выполнение компилирования при помощи инструментов WinLESS или LESS.app. WinLESS – это компилятор, разработанный для Windows, а LESS.app предназначен для OSX.

Эти инструменты могут конвертировать код LESS в статичный CSS-код в автоматическом режиме при сохранении документа, и сразу же оповещать нас о допущенных в коде ошибках. Позвольте нам рассказать вам об удобстве этого инструмента:

Сначала давайте скачаем и установим WinLESS.

Эффективная работа с LESS: советы и инструменты

Далее кликайте по кнопке Add Folder и укажите директорию, в которой находятся ваши .less-файлы (предположим, что вы уже создали такую папку и хотя бы один файл). Как только укажете папку, WinLESS просканирует её и найдет все .less-файлы, а затем отобразит их в списке.

Эффективная работа с LESS: советы и инструменты

Пройдите в меню File > Setting и выделите следующие опции:

* Automatically compile files when saved (автоматически компилировать файл при сохранении)
* Show message on successful compile (оповещать об успешном завершении компиляции)

Эффективная работа с LESS: советы и инструменты

Мы также можем указать целевую папку, если готовые файлы следует сохранять в другой каталог. Но в данном примере мы оставим всё как есть. Что означает, что файлы будут сохраняться в тот же каталог.

Эффективная работа с LESS: советы и инструменты

Откройте ваш .less-файл из добавленной директории, внесите некоторые изменения и сохраните его.

Эффективная работа с LESS: советы и инструменты

WinLESS, при сохранении файла, оповестит вас о том, что все изменения были успешно компилированы в .css, либо предупредит о допущенных ошибках в коде. Дальше вы можете сразу направиться в целевую директорию для .css-файлов, и вам не придется ждать, пока код будет скомпилирован.

Эффективная работа с LESS: советы и инструменты

Если вы используете Mac, то можете воспользоваться LESS.app, которое действует по тому же принципу, что и WinLESS.

Шаблоны миксинов

В сегодняшнем примере мы воспользуемся следующими CSS3-параметрами: Gradient, Shadow и Border Radius (градация, тень и закругленные углы).

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

или

background: -moz-linear-gradient(top, #f0f9ff 0%, #a1dbff 100%);
background: -webkit-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);
background: -o-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);
background: -ms-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);
background: linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);

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

И нам больше всего нравятся Less Elements, которые содержат много удобных шаблонов CSS3-правил. Следовательно, сейчас нам придется писать гораздо меньше кода.

Итак, теперь давайте посмотрим, как все вышеприведенные советы могут помочь нам.

Собираем всё вместе

В данном примере мы собираемся создать простую кнопку со ссылкой. Для начала нам нужно создать новый HTML-документ, и поместить в него следующую разметку:

<head>
<title>LESS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a rel="external" href="#">Click Me</a>
</body>

Создайте styles.less в качестве нашей основной таблицы стилей LESS, сохраните документ в ту же папку, где расположен наш HTML-документ, и добавьте папку в WinLESS.

Импортируйте elements.less, который мы скачали до этого, используя следующую строку:

@import "elements.less";

Теперь мы можем использовать любые миксины, предоставленные в elements.less: .gradient, .rounded и .bordered. Мы уверены, что названия миксинов вполне сами о себе говорят.

Далее, ниже в каскадных таблицах стилей, расположите LESS-правила. И снова сохраните документ.

a {
display: inline-block;
padding: 10px 20px;
color: #555;
text-decoration: none;
.bw-gradient(#eee, 240, 255);
.rounded;
.bordered;
&:hover {
.bw-gradient(#eee, 255, 240);
}
}

Так как наш .less-файл уже добавлен в WinLESS, он будет автоматически компилирован в .CSS. Теперь давайте посмотрим на результат.

Эффективная работа с LESS: советы и инструменты

Не так плохо, не правда ли? Учитывая тот факт, что данная кнопка была создана при помощи нескольких строк кода. Теперь давайте посмотрим на сгенерированный статичный CSS-код:

a {
display: inline-block;
padding: 10px 20px;
color: #555;
text-decoration: none;
background: #eeeeee;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f0f0f0), color-stop(1, #ffffff));
background: -ms-linear-gradient(bottom, #f0f0f0 0%, #f0f0f0 100%);
background: -moz-linear-gradient(center bottom, #f0f0f0 0%, #ffffff 100%);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-top: solid 1px #eeeeee;
border-left: solid 1px #eeeeee;
border-right: solid 1px #eeeeee;
border-bottom: solid 1px #eeeeee;
}
a:hover {
background: #eeeeee;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #f0f0f0));
background: -ms-linear-gradient(bottom, #ffffff 0%, #ffffff 100%);
background: -moz-linear-gradient(center bottom, #ffffff 0%, #f0f0f0 100%);
}

В завершение

Давайте подведем краткий итог нашего сегодняшнего руководства:

* Активируя подсветку синтаксиса в нашем текущем редакторе, нам не придется устанавливать дополнительные редакторы только для работы с синтаксисом LESS; это экономит чуточку пространства на вашем жестком диске.
* Нам также больше не придется скачивать и интегрировать библиотеку less.js в головную секцию нашего HTML-документа (как мы делали это в предыдущем руководстве). Таким образом, наш HTML-документ остается аккуратным.
* Используя инструменты компиляции вроде WinLESS и LESS.app, мы можем генерировать статичный CSS-код. Так что, если с синтаксисом будет что-то не так, то мы можем узнать об этом немедленно.
* Шаблоны миксинов вроде Less Elements – наши лучшие друзья. Они на самом деле могут сэкономить наше время при компилировании CSS3-параметров.

Мы подошли к последнему абзацу нашего руководства. Надеемся, что вам понравилась наша сегодняшняя статья, и что она окажется полезной для вас в ваших будущих проектах. Спасибо за то, что были с нами все это время. Если у вас есть какие-то идеи, то можете воспользоваться полем комментариев ниже.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, LESS
Опубликовал Design FactoRy   Прочитано (раз): 15132   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 19 ноября 2012 @ 11:25
Написал: Николай — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
У Вас кривая ссылка на дополнения LESS для Dreamweaver, вот правильная:

http://www.adobe.com/cfusion/exchange/index.cfm?searchfield=less&search_exchange

=3&search_category=-1&search_license=&search_rating=&search_platform=0&search_pu

bdate=&num=25&startnum=1&event=search&sticky=true&sort=0&rnav_dummy_tmpfield=&Su

bmit=

К тому же там есть компилятор LESS для Dreamweaver
Комментарий #2: 16 января 2013 @ 02:32
Написал: Игорь — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Требует Adobe ID

http://www.adobe.com/cfusion/exchange/index.cfm?searchfield=less&search_exchange

=3&search_category=-1&search_license=&search_rating=&search_platform=0&search_pu

bdate=&num=25&startnum=1&event=search&sticky=true&sort=0&rnav_dummy_tmpfield=&Su

bmit
Комментарий #3: 4 декабря 2013 @ 18:13
Написал: Konstantin — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
http://www.dreamdealer.nl/articles/how_to_get_scss

_and_less_files_to_open_in_dreamweaver.html

на ангельском, но без доп. плагинов от адоба и регистраций...
меняйте как указано:
1. 2 файла в C:\Documents and Settings\user\Application Data\Adobe\AdobeDreamweaver
2. те же 2 файла, только в C:\Users[USERNAME]AppDataRoamingAdobeDreamweaver

у меня cs6 - всё заработало
Комментарий #4: 26 августа 2014 @ 18:41
Написал: Алексей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо Большое вам ! Долго шарил по инету, думал уже и не использовать лесс а по старинке все рускамии )))))) спасибо спасибо вам !
Комментарий #5: 26 августа 2014 @ 18:57
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Алексей, пожалуйста! Рады были помочь...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930