Изучаем LESS: Общее описание системы
Теперь, когда мы закончили рассмотрение SASS, давайте поговорим о LESS. Если вы еще не читали мою статью по SASS, вы можете найти ее здесь.
В своей предыдущей статье я перечислил недостатки CSS и рассказал, как с помощью методов предварительной подготовки можно оптимизировать рабочий процесс.
Мы также говорили о том, как реализовать SASS с помощью переменных, вложенных элементов, примесей, функций и так далее.
Так что, теперь мы готовы приступить к изучению еще одного метода предварительной обработки - LESS.
LESS в двух словах
LESS - это язык динамических таблиц стилей, который расширяет CSS и, также как и SASS, характеризуется динамическим поведением, примером чего могут служить переменные, примеси, операции и функции.
Это позволяет составлять CSS-код более просто, используя только примеси, функции, другие динамические элементы и их комбинации. LESS также позволяет повысить читаемость и организацию CSS-кода с помощью импорта, вложенных правил и комментариев с расширением .less.
LESS работает и на стороне клиента (IE, Firefox и т.д.), и на стороне сервера, используя Node.js. В этой статье мы рассмотрим клиентскую сторону. Так что, просто сядьте как можно удобнее, расслабьтесь и наслаждайтесь уроком.
Что вам понадобится для выполнения заданий данного урока:
- LESS библиотека;
- SimpLESS для Mac/Windows (компилятор на стороне клиента);
- Текстовый редактор;
- Время и терпение.
Установка SimpleLESS
В качестве LESS компилятора на стороне клиента я буду использовать SimpleLESS, потому что он прост в использовании, и это бесплатное приложение. Так что, перейдите по ссылке, скачайте и запустите его.
При первом запуске SimpleLESS вы увидите что-то вроде изображения приведенного ниже. Пожалуйста, обратите внимание - если в верхней строке вы не видите текущую версию, это означает, что приложение не работает должным образом.
В этом случае вам необходимо скачать его заново.
Подготовка разметки и LESS Javascript
Прежде, чем мы приступим к рассмотрению функционала LESS, нам нужно подготовить разметку и файлы LESS. Поэтому создайте новую папку и назовите ее «LESS» или по-другому на ваше усмотрение.
Далее внутри папки LESS создайте HTML-файл, назовите его index.html, скопируйте и вставьте в него приведенный ниже код.
Обратите внимание, что мы включили библиотеку LESS ниже таблицы стилей:
!
Introduction to LESS
<link rel="stylesheet" type="text/css" />
<link href="style.less" rel="stylessheet/less" type="text/css" /><script type="text/javascript" src="less-1.3.0.min.js"></script></pre>
<div id="container"><header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</header>
<div>
Paragraph No. 1
Paragraph No. 2
Paragraph No. 3</div>
<div>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<footer>
<h3>This is a cool footer</h3>
</footer></div>
<pre>Затем создайте новый файл и назовите его style.less. Чтобы вы могли увидеть, как компилируется LESS, давайте добавим в этот файл несколько примеров кодов LESS. Идем дальше.
Скопируйте и вставьте следующий код в файл style.less:
@myColor: #00000;
@myFontSize: 23px;
@myBorder: 4px solid red;На данный момент у вас должна получиться структура файла наподобие этой:
Компиляция LESS помощью SimpLESS
Для компиляции LESS файла в CSS, запустите приложение SimpLESS и перетащите папку «LESS», которую мы создали раньше, в окно приложения:
Если в списке появилась папка, которую мы перетаскивали, значит она была успешно добавлена в приложение.
Обратите внимание, что в окне приложения будет выведена текстовая информация, которая уведомляет вас о том, был ли файл скомпилирован или нет.
В моем примере, как вы можете видеть в правом углу текст гласит «never compile». Это означает, что наша папка LESS никогда не компилировалась:
Приложение также предлагает нам на выбор различные функции, а именно: Prefix, Minify, Love. Вы можете видеть их в правом углу окна под оповещением о статусе.
Пожалуйста, обратите внимание, что все эти функции могут включаться или выключаться индивидуально.
Давайте рассмотрим их использование:
- Prefix - позволяет обеспечить совместимость с различными браузерами с помощью префиксов;
- Minify - сжимает ваш CSS документ, с помощью встроенного CSS-минификатора;
- Love - функция комментирует или извещает о состоянии SimpLESS для вашего документа.
Теперь давайте скомпилируем наш файл LESS в CSS. Для этого нужно просто нажать на иконку «Обновить» в левом углу окна приложения SimpLESS :
Если процесс компиляции был выполнен успешно, вы увидите сообщение об успешном завершении в правом углу приложения.
Пожалуйста, обратите внимание, что пока приложение запущено, оно будет отслеживать все обновления, которые вы совершаете для файлов в папке LESS:
Так что, когда вы откроете папку LESS, вы увидите, что в нее был добавлен файл CSS.
Убедитесь, что вы привязали скомпилированный файл CSS (style.css) к файлу index.html, чтобы добавились стили, которые вы задали через LESS:
Переменные LESS
Как и SASS, LESS также использует переменные. Если вы до этого занимались составлением кода, вы знаете, насколько использование переменных упрощает любой процесс.
В рамках предварительной обработки, наподобие той, что осуществляет LESS, переменные используются для заполнения значений каждого из стилей, применяемых в файле LESS.
Для определения переменной LESS использует знак @. Давайте посмотрим на практике, как это работает.
Откройте файл LESS и вставьте в него следующий код. Для этого кода я создал 3 переменные для цвета, размера шрифта и рамки.
Я добавил переменные myColor и myFontSize в тэг H1, переменную myBorder я добавил в список идентификаторов myList:
@myColor: #1f7eff;
@myFontSize: 30px;
@myBorder: 1px solid #1f7eff;
h1 {
color: @myColor;
font-size: @myFontSize;
}
#myList {
border: @myBorder;
}Теперь, если вы откроете файл style.css, вы увидите, что код был обновлен. Идем дальше, запускаем этот код через адресную строку браузера.
Вы увидите что-то похожее на то, что приведено на рисунке ниже:
Примеси LESS
Иногда нам нужно создать стили, которые могут повторяться по всей таблице стилей. В этом нам могут помочь примеси.
Так же, как и SASS, LESS поддерживает возможность добавлять каждый элемент неоднократно, но без необходимости использовать директиву @include. Вместо этого, ему достаточно всего лишь одной простой директивы класса стилей.
Чтобы понять, как в LESS работают примеси, давайте рассмотрим следующий код:
.
sample-mixin {
border: 1px solid red;
color: # ff871f;
margin: 30px;
}
h1 {
font-family: Arial;
.sample-mixin;
}
#myParagraph {
background: green;
.sample-mixin;
}Как вы можете видеть, я создал примесь, которая называется sample-mixin, и добавил ее в тег H1 и параграф с ID myParagraph.
Если вы запустите документ в браузере, результат будет подобен тому, что показано на рисунке ниже:
Вложенные правила LESS
В LESS аналогично SASS применяются вложенные правила для идентификаторов и классов. Это позволяет поддерживать чистоту и организацию кода.
Чтобы показать их работу на практике, я создал пример CSS-кода и соответствующий ему вариант LESS.
Вариант CSS
#container {
margin: 0px auto;
width: 600px;
border: 1px solid black;
}
#container header{
color: red;
}
#container #myList {
color: green;
padding: 30px;
}
#container footer {
color: blue;
}Вариант LESS
@myMargin: 0px auto;
@myWidth: 600px;
@myColor1: red;
@myColor2: green;
@myColor3: blue;
@myPadding: 30px;
@myBorder: 1px solid black;
#container {
margin: @myMargin;
width: @myWidth;
border: @myBorder;
h1, h2{
color: @myColor1;
}
#myList {
color: @myColor2;
padding: 30px;
}
footer {
color: @myColor3;
}
}Как видите, мы организовали наши стили с помощью LESS, и нам не пришлось повторять идентификатор container несколько раз.
Если вы запустите приведенные выше коды в браузере, то увидите аналогичные результаты.
Операторы LESS
Одной из самых полезных возможностей LESS является поддержка выполнения математических операций. Используя фиксированное значение стиля, вы можете добавлять, вычитать, умножать или даже делить его.
Давайте рассмотрим, как это работает:
@myBorderWidth: 5px;
@myBorderColor: green solid;
@myPadding: 90px;
#myList {
border: @myBorderWidth + 5px @myBorderColor;
padding: @myPadding / 3px;
}Как вы видите, к базовому значению рамки в 5 пикселей я добавил еще 5 пикселей, а затем задал ее цвет. Базовый отступ в 90 пикселей я разделил на 3, и в результате получил отступ в 30 пикселей.
Если вы запустите этот код в браузере, то увидите следующий результат:
Функции LESS
LESS предоставляет большое количество функций для обработки элементов и стилей. В этой статье мы рассмотрим функции цвета, если вы хотите узнать больше обо всех функциях LESS, вы можете перейти по ссылке.
Ниже приводится список функций цвета LESS:
- darken (цвет, значение);
- lighten (цвет, значение);
- saturate (цвет, значение);
- desaturate (цвет, значение);
- alpha (цвет)
Давайте попробуем поработать с некоторыми из этих функций. Откройте файл style.less и скопируйте в него следующие коды:
@myColor: #f58220;
@myBackground: #dedede;
body {
background: darken(@myBackground, 40%);
}
h1, h2 {
color: lighten(@myColor, 10%);
}
p
{
color: lighten(@myColor, 20%);
}Как видите, цвет фона был затемнен на 60%, а затем цвет текста тегов H1 и H2 стал светлее на 10%, а цвет текста тегов абзаца стал светлее на 20%.
Когда вы запустите данный код в браузере, то получите результат аналогичный, тому, что приведен на рисунке ниже:
Заключительное слово
Библиотека LESS предлагает для дизайнеров и разработчиков много фантастических возможностей. В этой статье представлено только общее описание системы.
Вы можете поэкспериментировать с представленными в статье кодами, после чего я хотел бы услышать о том, что у вас получилось, и увидеть результаты ваших экспериментов.
Всегда приветствуются пожелания, замечания и советы. Надеюсь, вам понравился этот урок, увидимся в следующий раз.