Как быстро настроить LESS

Less.js (или просто Less) - это CSS-препроцессор, который может коренным образом изменить способ написания вами CSS. И его легко установить и настроить для веб-разработки.

Есть несколько способов установки и настройки Less, но для разработки в браузере, или если вы просто хотите попробовать использовать его без установки на веб-сервере, самый быстрый способ это добавить ссылку на библиотеку less.js в HTML документ. Позвольте мне показать вам, как это сделать.

Во-первых, загрузите Less.js из GitHub.

Кроме того, если вы используете Git, вы можете запустить интерфейс командной строки, перейти в каталог вашего проекта, а затем клонировать Less на ваш компьютер:

git clone https://github.com/less/less.js.git

Там очень много файлов и каталогов внутри каталога less.js-master, но нас интересует только то, что находится внутри директории dist (файлы для использования на продакшене).

Как быстро настроить LESS 

Внутри каталога dist вы найдете два JavaScript-файла: less.js и less.min.js - вы можете использовать любой из них.

Как быстро настроить LESS

less.js - это версия с комментариями, большая по размеру, используйте её если вы любите читать исходный код. less.min.js - это уменьшенная версия, которая имеет меньший размер файла.

Скопируйте less.js или less.min.js в каталог вашего проекта.

В текстовом редакторе создайте HTML-документ. Затем создайте файл стилей Less. Он должен иметь расширение файла .less. Например: styles.less.

В <HEAD> вашего HTML документа, укажите ссылки на Less-стили и Less JS-файл, которые вы разместили в каталоге вашего проекта:

<head>
  <link href="styles.less" type="text/css" rel="stylesheet/less"/>
  <script src="less.js" type="text/javascript"></script>
</head>

Проверяем работу Less

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

Less CSS ниже использует Less-переменные и функции saturation() и desaturation().

HTML

<!DOCTYPE html>
<html>
<head>
<title>Less.js: Как быстро настроить LESS</title>
<link href="styles.less" type="text/css" rel="stylesheet/less"/>
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<h1>Less.js: Как быстро настроить LESS</h1>
<p><a href="http://www.webmasters.by">Ссылка</a></p>
</body>
</html>

LESS

/* Переменные */
@body-bg-color: #83b692;    // green
@text-color: #fff;          // white
@button-bg-color: #f9627d;  // pink
/* LESS CSS */
body {
  background: @body-bg-color;
  color: @text-color;
  font-family: sans-serif;
  text-align: center;
}
a:link, a:visited {
  background: @button-bg-color;
  color: @text-color;
  display: inline-block;
  padding: 10px 10px;
  text-decoration: none;
}
a:hover {
  background-color: desaturate(@button-bg-color, 50%);
}
a:active {
  background-color: saturate(@button-bg-color, 50%);
}

Советы об ошибках

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

less-js error warning 

Скомпилируйте Less CSS перед развертыванием

После окончания разработки, скомпилируйте .less файлы в обычные .css файлы. Если вы хотите сделать это быстро-и-грязно, вы можете использовать online Less compiler.

Less CSS выше был скомпилирован в следующий код с помощью LESSTESTER:

/* Variables */
/* LESS CSS */
body {
  background: #83b692;
  color: #ffffff;
  font-family: sans-serif;
  text-align: center;
}
a:link,
a:visited {
  background: #f9627d;
  color: #ffffff;
  display: inline-block;
  padding: 10px 10px;
  text-decoration: none;
}
a:hover {
  background-color: #d08b97;
}
a:active {
  background-color: #ff5c79;
}

Заключение

Хотя способ, описанный в этой статье, самый быстрый способ получить и запустить Less, лучше всего использовать это только для изучения, тестирования и разработки, потому что библиотека Javascript обрабатывает ваш CSS каждый раз, когда посетитель запрашивает ваши веб-страницы, что плохо сказывается на производительности.

Перевод статьи с sixrevisions.com


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии:

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


Защитный код
Обновить