Эффективная работа с менее полезными советами и инструментами

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

Ну, если вы готовы, давайте начнем.

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

1. Подсветка кода

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

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

Возвышенный текст 2

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

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

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

Установить пакет консоли

Сначала откройте Sublime Text 2 и откройте консоль из этого меню. Вид> Показать консоль

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

импорт urllib2, os; pf = "Package Control.sublime-package"; IPP = sublime.installed_packages_path (); os.makedirs (ipp), если не os.path.exists (ipp), иначе None; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); открытый (os.path.join (IPP, пф), 'термометра') .WRITE (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace (», '% 20')). read ()); печать «Пожалуйста, перезапустите Sublime Text для завершения установки»

это Консоль пакета поможет нам установить пакет highlight.

Установка LESS-подсвечивающего пакета

Перезапустите Sublime Text 2 и покажите палитру команд из этого меню Инструменты> Палитра команд. Подождите, пока список пакетов не загрузится. Затем введите Установить пакет искать и загружать репозитории пакетов.

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

Подождите минуту, пока Sublime Text 2 загрузит и установит пакет, пока в строке состояния не появится следующее уведомление.

Перейти в меню Вид> Синтаксис, Вы должны увидеть МЕНЬШЕ в списке. Это означает, что Sublime Text 2 поддерживает .Меньше и ваш синтаксис LESS теперь также должен иметь правильную цветовую подсветку.

Блокнот++

Notepad ++ - это бесплатный редактор с открытым исходным кодом, который имеет множество полезных плагинов для расширения функциональности. Он также широко используется многими веб-дизайнерами / разработчиками, особенно теми, кто работает с операционной системой Windows. Итак, я решил также включить подсказку, чтобы добавить МЕНЬШУЮ текстовую подсветку для него.

Установить LESS-подсветку в блокноте++

Включение цветовой подсветки LESS в Notepad ++ довольно просто.

Сначала загрузите пакет LESS для Notepad ++ по этой ссылке (userDefineLang_LESS.xml). Затем перейдите к Вид> Пользовательский диалог.

Появится следующее всплывающее окно ниже. Нажмите на Импортировать… кнопку и найдите ваш скачанный .XML файл. Затем перезапустите Блокнот++.

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

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

На рынке есть много других редакторов. Итак, здесь мы включаем несколько полезных ссылок для вас, если вы не используете ни один из вышеперечисленных редакторов.

Adobe DreamWeaver

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

кода

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

Geany

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

2. Меньше Компилятор

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

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

Во-первых, я хотел бы скачать WinLESS и установить его.

Нажмите кнопку Добавить папку и найдите каталог, в который вы положили .Меньше файлы (я полагаю, вы уже создали хотя бы один). Как только вы добавите один; WinLESS отсканирует и найдет все .Меньше файлы и показать вам в списке.

Перейти в меню Файл> Настройка, и убедитесь, что эти опции отмечены;

Автоматически компилировать файлы при сохранении
Показать сообщение об успешной компиляции

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

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

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

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

Предустановленные миксины

В современных практиках веб-дизайна мы будем использовать свойства CSS3, такие как Gradient, Shadow или Border Radius, которые выглядят так:

-webkit-border-radius: 3px; -moz-border-radius: 3px; радиус границы: 3 пикселя;

или же

background: -moz-linear-Gradient (сверху, # f0f9ff 0%, # a1dbff 100%); background: -webkit-linear-Gradient (сверху, # f0f9ff 0%, # a1dbff 100%); фон: -o-линейный градиент (top, # f0f9ff 0%, # a1dbff 100%); background: -ms-linear-Gradient (сверху, # f0f9ff 0%, # a1dbff 100%); фон: линейный градиент (вверху, # f0f9ff 0%, # a1dbff 100%);

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

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

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

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

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

 МЕНЬШЕ    Нажми на меня

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

Импортировать elements.less мы загрузили перед использованием этого синтаксиса:

@import "elements.less";

Теперь мы можем использовать любые миксины из elements.less, такие как .градиент, .закругленный, а также .окаймленный. Я уверен, что название Mixins довольно очевидно.

Затем, поместите ниже правила LESS в таблицу стилей. И сохранить его еще раз

 дисплей: встроенный блок; отступы: 10px 20px; цвет: # 555; текстовое оформление: нет; .bw-градиент (#eee, 240, 255); .rounded; .bordered; &: hover .bw-градиент (#eee, 255, 240);

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

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

 дисплей: встроенный блок; отступы: 10px 20px; цвет: # 555; текстовое оформление: нет; фон: #eeeeee; background: -webkit-градиент (линейный, левый нижний, левый верхний, color-stop (0, # f0f0f0), color-stop (1, #ffffff)); фон: -ms-линейный градиент (внизу, # f0f0f0 0%, # f0f0f0 100%); фон: -moz-linear-Gradient (центр внизу, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; радиус границы: 2 пикселя; -moz-background-clip: отступы; -webkit-background-clip: padding-box; background-clip: padding-box; border-top: solid 1px #eeeeee; рамка слева: сплошная 1px #eeeeee; Граница справа: сплошная 1px #eeeeee; Граница внизу: сплошная 1px #eeeeee;  a: hover background: #eeeeee; background: -webkit-градиент (линейный, левый нижний, левый верхний, color-stop (0, #ffffff), color-stop (1, # f0f0f0)); background: -ms-linear-Gradient (снизу, #ffffff 0%, #ffffff 100%); фон: -moz-linear-Gradient (центр внизу, #ffffff 0%, # f0f0f0 100%);

В итоге

Вот краткое изложение того, что мы обсуждали в этом посте:

Включив подсветку синтаксиса в нашем текущем редакторе, нам не нужно устанавливать дополнительный редактор только для составления синтаксиса LESS; это может сэкономить вам место / память на вашем диске.
Нам также больше не нужно загружать и связывать библиотеку LESS.js с нашим заголовком HTML, как мы делали в нашем предыдущем уроке. Таким образом, наш HTML-документ остается чистым и аккуратным.
Использование таких инструментов компилятора, как WinLESS и LESS.app, позволяет мгновенно генерировать статический вывод CSS. Итак, если с синтаксисом что-то не так, мы можем проверить это сразу.
Предустановленные миксины типа LESS Elements - наш лучший друг. Это может реально сэкономить наше время при компиляции утомительного свойства CSS3.