Верстка сайта

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

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

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

Есть несколько способов установки и настройки 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-файлы. Для этого существует несколько оффлайновых компиляторов. 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 каждый раз, когда посетитель запрашивает ваши веб-страницы, что плохо сказывается на производительности.

Комментарии 1
  • Аватар

    Работа с LESS "на лету" через серверный js-компилятор имеет два главных недостатка:

    1. Потребление ресурсов
    2. Отсутствие проверок на ошибки в LESS-коде

    Так что и для LESS и для других подобных ему препроцессоров лучше компилить выходной CSS на локальной машине.

    • 06.06.2024 09:09

Новый комментарий

Имя:
Для редактирования комментария осталось 10 минут