Представление LESS
CSS - простой и доступный инструмент. Однако, он имеет свои ограничения, особенно когда встает вопрос о сопровождении готового кода. Когда нужно модифицировать тысячи строк со стилями, разделенных по нескольким файлам, задача становится проблемой.
Для преодоления проблемы созданы препроцессоры CSS, которые позволяют комбинировать стили динамически. Существует несколько вариантов (например, LESS и SASS), но в данном уроке мы рассмотрим LESS.
Редактор LESS
На момент написания урока существовал единственный редактор, целиком посвященный работе с файлами LESS - ChrunchApp. Данное приложение кросс платформенное, построенное на Adobe Air, его можно запускать на Windows, Mac OSX and Linux.
Для других редакторов (таких как Dreamweaver, Coda, NotePad++ и SublimeText 2) существуют плагины или дополнения, которые позволяют организовать подсветку синтаксиса LESS.
Использование LESS
Использовать LESS очень просто. Нужно просто добавить две строки в тег head
вашего документа HTML. Первая строка содержит название вашего файла .less, а вторая строка - подключение библиотеки less.js
(ее можно скачать с официального сайта).
<link rel="stylesheet/less" type="text/css" href="/style.less"> <script src="/less.js" type="text/javascript"></script>
В нашем уроке мы покажем другой способ. Мы будем использовать компилятор LESS: для Windows можно применять WinLess, а для Mac OSX - LESS.app.
Создаем файл .less
в рабочей директории. Затем открываем компилятор (WinLESS или LESS.app) и импортируем рабочую директорию в него. компилятор найдет все файлы .less
. И все. Теперь, когда бы мы не изменили файл .less
, компилятор автоматически будет генерировать обычный код CSS в файл .css
, который воспринимается браузером.
Остается только привязать CSS файл к документу HTML:
<link rel="stylesheet/css" type="text/css" href="/style.css">
Синтаксис LESS
В отличие от обычного CSS, LESS больше похож на язык программирования. Он динамический, поэтому логичного ожидать использования в нем переменных, операций и области видимости.
Переменные
Сначала рассмотрим переменные.
При работе с CSS вы вероятно часто сталкивались с ситуацией, когда повторяющееся значение устанавливалось в нескольких блоках по всей таблице стилей.
.class1 { background-color: #2d5e8b; } .class2 { background-color: #fff; color: #2d5e8b; } .class3 { border: 1px solid #2d5e8b; }
Все прекрасно, пока не придется просеивать 1000 одинаковых участков кода по всей таблице стилей, чтобы поменять значение. Такая ситуация может сложиться при работе над большим проектом.
При использовании препроцессора LESS такая проблема легко решается с помощью переменных. Переменные позволяют хранить значения, которые можно многократно использовать в таблице стилей.
@color-base: #2d5e8b; .class1 { background-color: @color-base; } .class2 { background-color: #fff; color: @color-base; } .class3 { border: 1px solid @color-base; }
В выше приведенном примере в переменной @color-base
сохраняется значение #2d5e8b
. И когда потребуется изменить цвет, то нужно будет поменять значение только в переменной.
В переменной можно использовать и другие значения:
@font-family: Georgia @dot-border: dotted @transition: linear @opacity: 0.5
Примешивания
В LESS можно использовать примешивания для хранения набора правил и применения их в других наборах. Например:
.gradients { background: #eaeaea; background: linear-gradient(top, #eaeaea, #cccccc); background: -o-linear-gradient(top, #eaeaea, #cccccc); background: -ms-linear-gradient(top, #eaeaea, #cccccc); background: -moz-linear-gradient(top, #eaeaea, #cccccc); background: -webkit-linear-gradient(top, #eaeaea, #cccccc); }
В Выше приведенном примере мы устанавливаем цвет градиента в классе .gradients
. Затем, когда нужно добавить градиент, нужно просто вставить .gradients
следующим образом:
.box { .gradients; border: 1px solid #555; border-radius: 3px; }
Класс .box
наследует все объявления из .gradients
. Поэтому выше приведенное выражение LESS эквивалентно следующему обычному коду CSS:
.box { background: #eaeaea; background: linear-gradient(top, #eaeaea, #cccccc); background: -o-linear-gradient(top, #eaeaea, #cccccc); background: -ms-linear-gradient(top, #eaeaea, #cccccc); background: -moz-linear-gradient(top, #eaeaea, #cccccc); background: -webkit-linear-gradient(top, #eaeaea, #cccccc); border: 1px solid #555; border-radius: 3px; }
При работе с CSS3 можно использовать библиотеку LESS ELements, чтобы облегчить свою работу. LESS Elements является коллекцией общих примешиваний CSS3, которые часто используются в стилях, например, border-radius
, gradients
, drop-shadow
и так далее.
Чтобы использовать LESS нужно просто добавить правило @import
файл LESS. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.
Теперь можно использовать все классы из elements.less
. Например, чтобы добавить скругление углов рамки с радиусом 3px
к элементу div
, нужно написать:
Вложенные правила
При работе с обычным CSS кодом, достаточно часто встречается следующая структура кода:
nav { height: 40px; width: 100%; background: #455868; border-bottom: 2px solid #283744; } nav li { width: 600px; height: 40px; } nav li a { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; }
В обычном CSS коде мы выбираем наследников, указывая родителя в каждом наборе правил.
В LESS можно улучшить выше приведенный набор правил с помощью вложения наследников в родительский элемент:
nav { height: 40px; width: 100%; background: #455868; border-bottom: 2px solid #283744; li { width: 600px; height: 40px; a { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; } } }
Также можно использовать псевдо-классы, например:hover
, с помощью символом амперсенда (&). Допустим, мы хотим добавить :hover
к тегу ссылки:
a { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; &:hover { background-color: #000; color: #fff; } }
Операции
Также можно использовать операции в LESS. Доступны сложение, вычитание, умножение и деление.
Допустим, что элемент B в два раза выше элемента A:
@height: 100px .element-A { height: @height; } .element-B { height: @height * 2; }
Сначала мы определяем переменную @height
и назначаем ее для указания высоты элемента А.
В элементе В мы просто умножаем значение переменной на 2. Теперь, когда мы изменяем значение переменной @height
, элемент В всегда будет в два раза выше.
Область видимости
LESS использует концепцию области видимости. Сначала используются переменные из локального контекста, а если их нет, то происходит поиск в более широкой области видимости.
header { @color: black; background-color: @color; nav { @color: blue; background-color: @color; a { color: @color; } } }
В приведенном примере header
имеет переменную для цвета со значением black, но фон элемента nav
будет иметь цвет blue, так как переменная @color находится в локальном контексте.
Заключение
LESS - один из препроцессоров CSS. Можно также использовать SASS или Stylus.
В следующих уроках серии мы разберем пример реального использования LESS и некоторые полезные аспекты инструментария.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/UTuKTDoCE7A/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.