Представление 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
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 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 » Интеграция с Яндекс Еда
Если ты рождён без крыльев, не мешай им расти. (Коко Шанель / ЖИТЕЙСКАЯ МУДРОСТЬ ) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp