Что такое LESS?
Всем привет! Сегодня мы поговорим о том, что такое less.js и как его использовать.
Возможно, вы слышали такое выражение: "Препроцессоры CSS"? Вот сегодня мы разберём один из них - LESS.
Зачем нужен LESS?
LESS помогает добавить новые возможности, сделать ваш код более красивым и гибким. Препроцессоры немного похожи на языки программирования: там есть переменные, функции, операции и т.д. Представим, что у вас есть много всяких блоков, у которых свой цвет, и со временем вы решили сменить цвет сайта. На чистом CSS это может быть очень затруднительным, когда на LESS вы можете поместить цвета в переменные, которые затем использовать в блоках, и, если вы захотите сменить цвет, то вам нужно будет его поменять лишь в одной переменной. После того, как ваш код на LESS будет написан, вы сможете скомпилировать его в CSS и вставить себе на сайт.
Начало работы
Для начала скачайте библиотеку less.js с сайта http://lesscss.org/
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>less.js</title>
<link rel="stylesheet" href="style.less">
<script src="less.js"></script>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Документация</a></li>
<li><a href="#">Обучение</a></li>
<li><a href="#">Скачать</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
</body>
</html>
Структура простая: нумерованный список, который будет нашим меню. Но заметьте, что в теге head мы подключаем скачанный с сайта less.js, а все стили для него мы будем писать в файле style.less, который также подключаем.
Пишем стили. Файл style.less
@mainColor: #233A59;
@mainColor2: lighten(@mainColor, 30%);
@textColor: #f7f7f7;
div#nav {
ul {
li {
list-style: none;
a {
text-decoration: none;
font-family: verdana;
font-size: 14px;
color: @textColor;
float: left;
padding: 15px 30px;
border-right: 1px solid fadeout(@textColor, 60%);
.gradient(@mainColor2, @mainColor);
}
}
}
}
.gradient(@col, @col2) {
background-color: @col;
background-image: gradient(linear, left top, left bottom, from(@col), to(@col2));
background-image: linear-gradient(top, @col, @col2);
}
Итак, давайте разбираться, что же мы тут написали.
Во-первых, с помощью такого синтаксиса: @name создаются переменные в less. Мы можем записать туда, что хотим. В нашем случае у нас есть переменные mainColor и textColor, которые хранят цвет для нашего меню и текста и переменная mainColor2, где, заметьте, мы используем функцию lighten, которая помогает осветлить наш цвет. В нашем случае осветление будет 30%
Следующее отличие - вложенность. Заметили, что мы не пишем div#nav, затем #div#nav ul и так далее, а вкладываем наш список, ссылку и прочее внутрь. Удобно, правда?
Чтобы сделать градиент, мы создали свою собственную функцию, которая выглядит как класс и называется .gradient. Она принимает 2 параметра и использует их для того, чтобы создать градиент. Вызываем мы её в нашей ссылке, куда передаём переменные @mainColor и @mainColor2. Ещё одна функция, которую мы используем в ссылке - fadeout. Она позволяет снизить прозрачность. Мы выбрали значение 60%
Компиляция в CSS
Сейчас у нас всё прекрасно работает, но заливать файлы на сервер в таком виде не стоит. Почему? Потому, что у человека в браузере может быть отключён JavaScript, и тогда наши стили уже не сработают. Поэтому less лучше всего использовать при разработке, а когда всё уже готов, скомпилировать в css и уже его заливать на сервер. Для этого есть, например, онлайн компиляторы. Один из них - http://leafo.net/lessphp/ Вставьте слева less код, а затем нажмите compile. Справа вы увидете готовый css код.
Итак, сегодня мы разобрались, что такое less и как его использовать. Увидимся в следующей статье.
-
Создано 16.05.2014 20:58:44
-
Михаил Русаков
Комментарии (1):
javascript виключає мало хто, але процес компіляції дуже важкий - тому краще скомпілювати і викласти. Бо навіть на нормальних комп'ютерах любить тормозити, а ,що казати про різні Пентіуми... Я рекомендую для компіляції simpless
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.