Итак, если вы готовы, давайте приступим.
Дисклеймер: ниже описанные советы родились в свете личных ежедневных экспериментов. Так что, хотелось бы сразу обозначить тот факт, что эти советы кому-то могут подойти, а кому-то не понравятся. Примерно как в случае и с любыми другими советами, найденными в интернете. Тем не менее, мы надеемся, что вы сможете почерпнуть что-нибудь полезное из этой статьи.
1. Code Highlighter
Как уже было отмечено выше, мы познакомили вас с ChrunchApp. Тем не менее, это приложение вряд ли будет использовать каждый веб-дизайнер, так как каждый дизайны привык к своей собственной среде разработки, которая включает также и любимый редактор кода.
Вместо того чтобы устанавливать еще один редактор кода, вы можете использовать текущий, но добавить в него подсветку синтаксиса. Итак, в сегодняшнем руководстве мы хотим поделиться с вами информацией о том, как добавить подсветку кода LESS в два самых известных текстовых редактора: Sublime Text 2 и Notepad++.
1.1 Sublime Text 2
Этот редактор сегодня используют многие дизайнеры для компилирования кода. Это приложение доступно на Windows, Linux и OSX, и любой другой ОС. Вы можете без сомнения использовать это руководство для настройки.
Сейчас давайте скачаем версию с официального веб-сайта и опробуем сам редактор. Затем, ознакомьтесь со следующими инструкциями, которые помогут вам включить цветную подсветку кода LESS.
Примечание: пожалуйста, убедитесь, что вы ознакомились с условиями лицензии перед тем, как скачивать, так как бесплатная версия рассчитана только на ознакомление.
Консоль набора установки
Сначала откройте Sublime Text 2 и отобразите Консоль посредством данного меню View > Show Console
Затем, скопируйте и вставьте следующую командную строку в консоль, нажмите 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
Перезагрузите Sublime Text 2 и отобразите палитру команд (Command Palette) посредством данного меню Tools > Command Palette. Подождите, пока загрузится весь список пакетов. Затем впишите Install Package в поиск и загрузите хранилище пакетов загрузки.
Затем, в списке репозитория найдите пакет LESS, и нажмите Enter.
Подождите, пока Sublime Text 2 скачает и установит пакет. Должно появиться оповещение.
Пройдите в меню View > Syntax, и там, в списке, можно будет увидеть LESS. Это означает, что Sublime Text 2 поддерживает .less и ваш синтаксис LESS теперь также должен подсвечиваться.
1.2 Notepad++
Notepad++ – это бесплатный редактор кода с открытым исходным кодом, для которого существует множество плагинов, посредством которых можно расширить его функционал. Он также широко распространен среди веб-дизайнеров/разработчиков, особенно среди тех, кто работает с ОС Windows. Итак, мы решили и его включить в нашу сегодняшнюю статью.
Установка подсветки кода LESS в Notepad++
Это делается довольно просто.
Сначала нужно скачать пакет LESS для Notepad++ по этой ссылке (userDefineLang_LESS.xml). Затем пройти в меню View > User-Defined Dialogue.
Перед вами появится следующее всплывающее окно. Нажмите на кнопку Import, а затем укажите ваш скачанный .xml-файл. Затем перезагрузите Notepad++.
Откройте ваш файл .less и пройдите в меню языков (Languages). Теперь вы можете видеть, что 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.
Далее кликайте по кнопке Add Folder и укажите директорию, в которой находятся ваши .less-файлы (предположим, что вы уже создали такую папку и хотя бы один файл). Как только укажете папку, WinLESS просканирует её и найдет все .less-файлы, а затем отобразит их в списке.
Пройдите в меню File > Setting и выделите следующие опции:
* Automatically compile files when saved (автоматически компилировать файл при сохранении)
* Show message on successful compile (оповещать об успешном завершении компиляции)
Мы также можем указать целевую папку, если готовые файлы следует сохранять в другой каталог. Но в данном примере мы оставим всё как есть. Что означает, что файлы будут сохраняться в тот же каталог.
Откройте ваш .less-файл из добавленной директории, внесите некоторые изменения и сохраните его.
WinLESS, при сохранении файла, оповестит вас о том, что все изменения были успешно компилированы в .css, либо предупредит о допущенных ошибках в коде. Дальше вы можете сразу направиться в целевую директорию для .css-файлов, и вам не придется ждать, пока код будет скомпилирован.
Если вы используете 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. Теперь давайте посмотрим на результат.
Не так плохо, не правда ли? Учитывая тот факт, что данная кнопка была создана при помощи нескольких строк кода. Теперь давайте посмотрим на сгенерированный статичный 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-параметров.
Мы подошли к последнему абзацу нашего руководства. Надеемся, что вам понравилась наша сегодняшняя статья, и что она окажется полезной для вас в ваших будущих проектах. Спасибо за то, что были с нами все это время. Если у вас есть какие-то идеи, то можете воспользоваться полем комментариев ниже.