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


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

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

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

1. Кодовый маркер

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

Вместо того, чтобы устанавливать другой редактор кода, вы все равно можете использовать свой текущий редактор и включить подсветку синтаксиса в нем. Итак, в этой статье я поделюсь некоторыми советами, как добавить подсветку кода LESS в 2 известных текстовых редактора: Sublime Text 2 и Notepad ++.
Возвышенный текст 2
Этот редактор в настоящее время мой предпочтительный выбор, чтобы помочь мне составить коды. Это приложение доступно для Windows, Linux и OSX, поэтому, какой бы ни была ваша ОС, вы все равно сможете следовать этому совету.

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

Теперь давайте загрузим его с официального сайта и попробуем этот редактор. Затем прочитайте следующие инструкции, чтобы включить цветную подсветку 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) иначе Нет; 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 ‘)) .читать()); печать «Пожалуйста, перезапустите Sublime Text, чтобы завершить установку»

Консоль пакета

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

Управление пакетами: установить пакет

Затем найдите пакет LESS из списка хранилищ и нажмите Enter.

Меньше пакета

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

Пакет LESS успешно установлен

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

Вид - Синтаксис - МЕНЬШЕ

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

Notepad ++

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

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

View - пользовательский диалог

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

Языковое меню

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

.less файл

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

На рынке есть много других редакторов. Итак, здесь мы включаем несколько полезных ссылок для вас, если вы не используете ни один из вышеперечисленных редакторов.
Adobe DreamWeaver
Несомненно, Dreamweaver имеет огромную базу пользователей. Он доступен как для Mac, так и для Windows. Итак, если вы используете этот редактор, вот один из хороших источников установить LESS выделить в Adobe DreamWeaver.
кода
Если вы используете Mac, вы, вероятно, знаете кодаЭтот редактор является одним из самых популярных среди пользователей Mac. И, вот как вы можете установить LESS в Coda,
Geany
Это один из самых популярных редакторов кода среди пользователей Linux. Некоторые компьютеры в моем офисе, которые работают на Linux, также используют Geany, Таким образом, если вы используете его, вы можете включить LESS выделение, выполнив эта инструкция на SuperUser.com

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

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

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

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

Уинлесс

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

Графический интерфейс Windows для less.js

Перейдите в меню File> Setting и убедитесь, что эти опции отмечены;

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

настройки

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

Открыть папку

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

Успешная компиляция

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

Если вы используете Mac, вы можете использовать LESS.app это имеет ту же функцию, что и WinLESS.
Предустановленные миксины
В современных практиках веб-дизайна мы будем использовать свойства CSS3, такие как Gradient, Shadow или Border Radius, которые выглядят так:
-webkit-border-radius: 3 пикселя;
-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%);
В нашем предыдущем уроке мы сделали несколько миксов для упрощения этого синтаксиса. К счастью, некоторые люди из сообщества веб-дизайнеров достаточно щедры, чтобы тратить свое время на компиляцию этих полезных миксов, так что нам не нужно собирать их самим с нуля.

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

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

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

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

МЕНЬШЕ

Нажми на меня

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

Импортируйте elements.less, который мы скачали, прежде чем использовать этот синтаксис:
@import “elements.less”;
Теперь мы можем использовать любые миксины из элементов .less, такие как .gradient, .ounded и .bordered. Я уверен, что название Mixins довольно очевидно.

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

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

Поскольку наш файл .less был добавлен в 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 {
фон: #eeeeee;
background: -webkit-градиент (линейный, левый нижний, левый верхний, color-stop (0, #ffffff), color-stop (1, # f0f0f0));
фон: -ms-линейный градиент (внизу, #ffffff 0%, #ffffff 100%);
фон: -moz-linear-Gradient (центр внизу, #ffffff 0%, # f0f0f0 100%);
}

В итоге

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

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

Мы подошли к последнему разделу наших советов. Я надеюсь, что вам понравится и вы найдете их полезными для ваших текущих или будущих веб-проектов. Спасибо за чтение советов. Если у вас есть какие-либо комментарии, пожалуйста, не стесняйтесь размещать их в поле для комментариев ниже.


0 Comments

Добавить комментарий