Вложения в Less


Содержание

Вложения в Less

Less это препроцессор CSS, а это значит: less (надстройка языка CSS) расширяет язык CSS, добавляет возможность использовать переменные, функции, примеси, и много других техник, которые, в свою очередь, позволяют сделать CSS управляемым и расширяемым.

Less работает внутри Node, в браузере, и внутри Rhino. Есть также много сторонних инструментов, которые позволяют компилировать ваши файлы и наблюдать за изменениями.

Использование на клиентской стороне

Использование less.js в браузере отлично подойдет для разработки, но не рекомендуется для производства (релиза).

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

Свяжите ваш документ с .less файлом через атрибут rel со значением stylesheet/less .

Затем, скачайте less.js и подключите его в тег script , который, в свою очередь, вставьте в тег head . Стилевой файл должен идти перед тегом script (как обычно).

Опции браузера

Опции, определяющие настройки глобального объекта Less , поставьте перед тегом script :

Переменные

Это довольно очевидно:

Обратите внимание: все переменные фактически являются ‛константами“, так как они могут быть определены лишь один раз.

Примеси

Примеси являются одним из способов подключить набор свойств из одного правила в другое правило. Итак, например, мы имеем следующий класс:

И мы хотим использовать эти свойства внутри другого правила. Для этого просто положите имя класса туда, где вы хотите определить этот набор свойств, например:

Свойства из .bordered появятся в #menu a и в .post a . (Отметьте, что в качестве примеси можно использовать и #id ).

Примеси с параметрами

Опционально после имени примеси можно ставить круглые скобки.

Примесям можно передавать аргументы, которые в качестве переменных используются в блоке примеси.

Применяем в различных правилах:

Параметры в примесях могут иметь значения по умолчанию:

Как вариант, допустимый вызов примеси:

И будет подключен 5px border-radius:

Вы также можете использовать примеси, которые не принимают параметры. Это полезно, если вы захотите спрятать примесь в CSS, при этом сама примесь будет использоваться (внутри блока объявлений).

Примеси с несколькими параметрами

Параметры разделяются запятой или точкой с запятой. Рекомендуется использовать точку с запятой. Запятая имеет двойной смысл: ее можно интерпретировать как разделитель для разделения примесей или как разделитель селекторов в CSS.

Использование запятой в качестве разделителя аргументов у примеси делает невозможным создание списка CSS как аргумента. Другими словами, если компилятор видит по крайней мере одну точку с запятой при вызове примеси, он предполагает, что разделителем является точка с запятой и все запятые относятся к спискам CSS:

  • Два аргумента и каждый содержит запятую: .name(1, 2, 3; something, else)
  • Три аргумента и каждый содержит одну цифру: .name(1, 2, 3)
  • Используется фиктивная точка с запятой, чтобы создать примесь с одним аргументом, который содержит запятые: .name(1, 2, 3;)
  • Значение по умолчанию с разделителем запятой: .name(@param1: red, blue;)

Вполне допустимо определять несколько примесей с одним и тем же именем и количеством параметров. Если вы используете примесь с одним параметром, например, .mixin(green);, затем свойства всех примесей с точно таким же обязательным параметром будут использованы:

Примеси как функции

Возвращение значений из примеси.

Все переменные, определенные в примеси, могут быть использованы в вызывающей области видимости (если в вызывающей области видимости уже не определена переменная с таким же именем).

Таким образом, переменные определенные в примеси можно использовать как возвращаемые значения. Это позволяет создать примесь, которая может быть использована почти как функция. Например:

Сдерживатели примеси

Сдерживатели ( if-else ) (Guards), в отличие от простых значений, полезны, когда вы хотите получить соответствие шаблону, . Если вы знакомы с функциональным программированием, вы наверняка сталкивались с ними.

Пытаясь не отходить от декларативной природы CSS, Less реализовал выполнение условий через сдерживание примесей, вместо использования операторов if/else , в духе использования медиа-запросов.

When это ключевое слово, которое вводит сдерживание.

До версии 1.5 вы могли использовать следующий код:

Вы можете комбинировать условие с & , например:

Операторы сравнения для сдерживании

Полный список операторов сравнения для сдерживания: > , >= , = , = , . Кроме того, ключевое значение true делает эквивалентными следующие две примеси:

Любое значение кроме ключевого слова true является ложью ( false ).

Отметьте, вы можете сравнить аргументы друг с другом или с не-аргументами.

Циклы

В Less примеси могут вызывать сами себя. Такие рекурсивные примеси в сочетании со сдерживателями и шаблонами соответствия, могут быть использованы для создания циклов.

Общие пример использования рекурсивного цикла, который создает классы для CSS сетки.

Группировка селекторов. Назначение псевдо-класса :extend() в Less

Проще говоря, псевдокласс :extend() автоматизирует следующий процесс:

  1. Отыскать селекторы с одинаковыми свойствами.
  2. Выбрать базовый селектор.
  3. Перечислить все найденные селекторы в объявлении базового селектора.
  4. Все новые селекторы добавить в список селекторов базового объявления.

Появилось в v1.4.0

В указанном выше правиле селектор :extend будет применять «расширяющий селектор» ( nav ul ) на класс .inline где бы ни появился класс .inline. Блок декларации останется как есть, без каких-либо ссылок к расширению (т.к. расширение – это не CSS).

В результате получим:

Обратите внимание, как селектор nav ul:extend(.inline) преобразовывается на выходе как nav ul — расширение удаляется перед выводом, а блок селектора остается неизменным. Если в тот блок не вложено никаких свойств, он удаляется из вывода (но расширение по-прежнему может влиять на другие селекторы).

Синтаксис :extend()

Псевдокласс :extend() либо присоедине к селектору, либо размещен в наборе правил. Он выглядит как псевдо-класс с параметром селектора, опционально следующим за ключевым словом all :

Расширение селекторов может содержать один или несколько классов, разделенных запятыми. Например:

Расширение селекторов, присоединенный к селектору

Расширение селекторов, присоединенное к селектору, выглядит как обычный псевдо-класс с параметром в виде селектора. Селектор может содержать несколько extend, но все они должны стоять в конце селектора.

  • Extend после селектора: pre:hover:extend(div pre) .
  • Между селектором и extend можно ставить пробел: pre:hover :extend(div pre) .
  • Можно ставить несколько extend: pre:hover:extend(div pre):extend(.bucket tr) — То же самое, что и pre:hover:extend(div pre, .bucket tr)
  • А вот так нельзя: pre:hover:extend(div pre).nth-child(odd) . Extend должен стоять в конце.

Если набор правил содержит несколько селекторов, у любого из них может быть Extend. Несколько селекторов с extend в одном наборе правил:

Контекстная группировка

Расширение селекторов (Extend) можно размещать внутри набора правил с помощью синтаксиса &:extend(selector) . Размещение псевдокласса :extend() в теле является своеобразным ярлыком для размещения его в каждом селекторе этого набора правил.

Extend внутри набора правил:

То же самое, что и добавление extend после каждого селектора:

Группировка внутренних селекторов

Extend может группировать внутренние селекторы. Например:

В результате получим:

По сути, расширение просматривает скомпилированный CSS, а не оригинальный Less-код. Например:


Точное совпадение с Extend

Расширение селекторов (Extend) по умолчанию ищет точные совпадения между селекторами. Неважно, использует ли селектор «ведущую звезду». Неважно, что два N-ных выражения имеют одинаковое значение, они должны быть одинаково сформированы, чтобы совпадать. Единственное исключение – кавычки в селекторе атрибута, т.к. Less считает, что у них одинаковое значение и они совпадают.

Ведущая звезда не играет роли. Селекторы *.class и .class эквивалентны, но extend не будет сравнивать их:

В результате получим:

Порядок псевдо-классов имеет значение. Cелекторы link:hover:visited и link:visited:hover соответствуют одинаковому набору элементов, но extend рассматривает их как разные:

В результате получим:

N-ное выражение

Форма N-ного выражения не имеет значения. N-ные выражения 1n+3 и n+3 эквивалентны, 3эквивалентны, но extend не будет их сравнивать:

В результате получим:

Тип кавычек в селекторе атрибута не важен. Все следующие записи эквивалентны.

В результате получим:

«all» в Расширении селекторов

Когда вы указываете ключевое слово «all» последним в аргументе псевдокласса :extend() , — это говорит Less сравнить этот селектор с частью другого селектора. Селектор скопируется и совпавшая часть селектора только тогда заменится расширением, создав новый селектор. Например:

В результате будем иметь такие CSS стили:

Вы можете считать, что этот вариант операции по сути совершает обычный поиск и замену.

Интерполяция селекторов с Расширением селекторов

Расширение селекторов НЕ может сравнивать селекторы с переменными. Если селектор содержит переменную, расширение проигнорирует ее. Для этого существует запрос функции ожидания, но это не простая замена. Однако, расширение можно присоединить к интерполированному селектору.

Селектор с переменной не будет сравниваться:

А расширение с переменной в целевом селекторе ни с чем не совпадает:

Оба предыдущих примера компилируются в:

Однако, :extend , присоединенное к интерполированному селектору будет работать:

Предыдущий LESS компилируется в следующий CSS:

Охват / Расширение селекторов внутри @media

Расширение селекторов, написанное внутри медиа-декларирования должно совпадать только с селекторами внутри того же самого медиа-декларирования:

Расширения селекторов верхнего совпадают со всем, включая селекторы внутри встроенного медиа:

Выявление дубликатов

Пока что дубликаты не обнаружены. Например:

В результате получим:

Случаи использования расширений

Классический

Классический случай использования – избегать добавления базового класса. К примеру, если у вас есть

и вы хотите, чтобы у вас был подтип animal, который переопределит фоновый цвет, то у вас есть два варианта. Первое — изменить HTML-код

или создать упрощенный код и использовать расширение в Less, например

Уменьшение размера CSS

Примеси копируют все свойства в селектор, что может привести к ненужному дублированию. Таким образом, вы можете пользоваться расширениями, а не примесями, чтобы переместить селектор к свойствам, которые вы хотите использовать, что приведет к созданию меньшей CSS. Пример с примесью:

В результате получим:

Пример (с расширением селекторов):

В результате получим:

Комбинирование стилей / Более продвинутая примесь

Другой случай использования – альтернатива примесям, т.к. примеси могут использоваться только с простыми селекторами, если у вас есть два разных HTML-блока, но вам нужно применить к ним одинаковый стиль, вы можете использовать расширения. Например:

Изучаем 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 ниже таблицы стилей:

Heading 1

Heading 2

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Затем создайте новый файл и назовите его style.less . Чтобы вы могли увидеть, как компилируется LESS, давайте добавим в этот файл несколько примеров кодов LESS. Идем дальше.

Скопируйте и вставьте следующий код в файл style.less :

На данный момент у вас должна получиться структура файла наподобие этой:


Компиляция LESS помощью SimpLESS

Для компиляции LESS файла в CSS, запустите приложение SimpLESS и перетащите папку « LESS », которую мы создали раньше, в окно приложения:

Если в списке появилась папка, которую мы перетаскивали, значит она была успешно добавлена в приложение.

Обратите внимание, что в окне приложения будет выведена текстовая информация, которая уведомляет вас о том, был ли файл скомпилирован или нет.

В моем примере, как вы можете видеть в правом углу текст гласит « never compile ». Это означает, что наша папка LESS никогда не компилировалась:

Приложение также предлагает нам на выбор различные функции, а именно: Prefix , Minify , Love . Вы можете видеть их в правом углу окна под оповещением о статусе.

Илон Маск рекомендует:  FileDateToDateTime - Функция Delphi

Пожалуйста, обратите внимание, что все эти функции могут включаться или выключаться индивидуально.

Давайте рассмотрим их использование:

  • 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 :

Теперь, если вы откроете файл style.css , вы увидите, что код был обновлен. Идем дальше, запускаем этот код через адресную строку браузера.

Вы увидите что-то похожее на то, что приведено на рисунке ниже:

Примеси LESS

Иногда нам нужно создать стили, которые могут повторяться по всей таблице стилей. В этом нам могут помочь примеси.

Так же, как и SASS, LESS поддерживает возможность добавлять каждый элемент неоднократно, но без необходимости использовать директиву @include . Вместо этого, ему достаточно всего лишь одной простой директивы класса стилей.

Чтобы понять, как в LESS работают примеси, давайте рассмотрим следующий код:

Как вы можете видеть, я создал примесь, которая называется sample-mixin , и добавил ее в тег H1 и параграф с >myParagraph .

Если вы запустите документ в браузере, результат будет подобен тому, что показано на рисунке ниже:

Вложенные правила LESS

В LESS аналогично SASS применяются вложенные правила для идентификаторов и классов. Это позволяет поддерживать чистоту и организацию кода.

Чтобы показать их работу на практике, я создал пример CSS-кода и соответствующий ему вариант LESS.

Вариант CSS

Вариант LESS

Как видите, мы организовали наши стили с помощью LESS, и нам не пришлось повторять идентификатор container несколько раз.

Если вы запустите приведенные выше коды в браузере, то увидите аналогичные результаты.

Операторы LESS

Одной из самых полезных возможностей LESS является поддержка выполнения математических операций. Используя фиксированное значение стиля, вы можете добавлять, вычитать, умножать или даже делить его.

Давайте рассмотрим, как это работает:

Как вы видите, к базовому значению рамки в 5 пикселей я добавил еще 5 пикселей, а затем задал ее цвет. Базовый отступ в 90 пикселей я разделил на 3, и в результате получил отступ в 30 пикселей.

Если вы запустите этот код в браузере, то увидите следующий результат:

Функции LESS

LESS предоставляет большое количество функций для обработки элементов и стилей. В этой статье мы рассмотрим функции цвета, если вы хотите узнать больше обо всех функциях LESS, вы можете перейти по ссылке.

Ниже приводится список функций цвета LESS:

  • darken (цвет, значение);
  • lighten (цвет, значение);
  • saturate (цвет, значение);
  • desaturate (цвет, значение);
  • alpha (цвет)

Давайте попробуем поработать с некоторыми из этих функций. Откройте файл style.less и скопируйте в него следующие коды:

Как видите, цвет фона был затемнен на 60%, а затем цвет текста тегов H1 и H2 стал светлее на 10%, а цвет текста тегов абзаца стал светлее на 20%.

Когда вы запустите данный код в браузере, то получите результат аналогичный, тому, что приведен на рисунке ниже:

Заключительное слово

Библиотека LESS предлагает для дизайнеров и разработчиков много фантастических возможностей. В этой статье представлено только общее описание системы.

Вы можете поэкспериментировать с представленными в статье кодами, после чего я хотел бы услышать о том, что у вас получилось, и увидеть результаты ваших экспериментов.

Всегда приветствуются пожелания, замечания и советы. Надеюсь, вам понравился этот урок, увидимся в следующий раз.

Данная публикация представляет собой перевод статьи « Сайтостроение от А до Я » , подготовленной дружной командой проекта Интернет-технологии.ру

Введение в LESS

CSS — простой и доступный инструмент. Однако, он имеет свои ограничения, особенно когда встает вопрос о сопровождении готового кода. Когда нужно модифицировать тысячи строк со стилями, разделенных по нескольким файлам, задача становится проблемой. Для преодоления проблемы созданы препроцессоры CSS, которые позволяют комбинировать стили динамически. Существует несколько вариантов (например, LESS и SASS), сегодня мы рассмотрим LESS.

Использование LESS

Использовать LESS очень просто. Нужно просто добавить две строки в тег head вашего документа HTML. Первая строка содержит название вашего файла LESS, а вторая строка — подключение библиотеки less.js, которую можно скачать с официального сайта.

Теперь LESS файл будет работать также как и обычный CSS.

Этот метод работает только в современных браузерах и подходит для использования на локальном сервере. Для рабочего сайта необходима предварительная компиляция на веб-сервере или различные инструменты от сторонних производителей.

Синтаксис LESS

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

Переменные

При работе с CSS вы вероятно часто сталкивались с ситуацией, когда повторяющееся значение устанавливалось в нескольких блоках по всей таблице стилей.

Все прекрасно, пока не придется просеивать 1000 одинаковых участков кода по всей таблице стилей, чтобы поменять значение. При использовании препроцессора LESS такая проблема легко решается с помощью переменных. Переменные позволяют хранить значения, которые можно многократно использовать в таблице стилей.

В выше приведенном примере в переменной @color-base сохраняется значение #2d5e8b . И когда потребуется изменить цвет, то нужно будет поменять значение только в переменной.

В переменной можно использовать и другие значения:

Вложенные правила (nesting)

При работе с обычным CSS кодом, достаточно часто встречается следующая структура кода:

В обычном CSS коде мы выбираем наследников, указывая родителя в каждом наборе правил. В LESS можно улучшить выше приведенный набор правил с помощью вложения наследников в родительский элемент:

Также можно использовать псевдо-классы, например :hover , с помощью символа амперсенда & . Допустим, мы хотим добавить :hover к тегу ссылки:


Примеси (mixins)

В LESS можно использовать примеси для хранения набора правил и применения их в других наборах. Например:

В выше приведенном примере мы устанавливаем цвет градиента в классе .gradient . Затем, когда нужно добавить градиент, нужно просто вставить .gradient следующим образом:

Класс .box наследует все объявления из .gradient . Поэтому выше приведенное выражение LESS эквивалентно следующему обычному коду CSS:

Примеси с параметрами

Примеси с параметрами почти такие же, как и обычные, но сродни функциям они могут принимать параметры для использования внутри примеси:

Результат выглядит следующим образом:

Мы также можем выставить значения по умолчанию для параметров:

Что в результате дает:

При работе с CSS3 можно использовать библиотеку LESS ELements, чтобы облегчить свою работу. LESS Elements является коллекцией общих примешиваний CSS3, которые часто используются в стилях, например, border-radius , gradients , drop-shadow и так далее.

Чтобы использовать LESS нужно просто добавить правило @import файл LESS. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.

Теперь можно использовать все классы из elements.less . Например, чтобы добавить скругление углов рамки с радиусом 3px к элементу div , нужно написать:

Операции

Также можно использовать операции в LESS. Доступны сложение, вычитание, умножение и деление.

Допустим, что элемент B в два раза выше элемента A :

Сначала мы определяем переменную @height и назначаем ее для указания высоты элемента А . В элементе В мы просто умножаем значение переменной на 2 . Теперь, когда мы изменяем значение переменной @height , элемент В всегда будет в два раза выше.

Операции с цветом

Операции, которые мы продемонстрировали выше, могут быть использованы для управления цветом. Цвета можно создавать и управлять ими посредством математики:

И скомпилированный код выглядит следующим образом:

Это еще не все, что LESS может делать с цветами. Все становится намного интереснее, когда речь заходит о встроенных функциях для работы с цветом:

Математические функции

С помощью этих функций вы можете использовать числа в своем коде. Среди этих функций можно выделить round() , ceil() , floor() и percentage() . Передавая числа в эти функции, вы сможете получить округленные числа, числа, округленные по большему и по меньшему значению, а также числа в процентном выражении.

Область видимости (scope)

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

В приведенном примере header имеет переменную для цвета со значением black , но фон элемента nav будет иметь цвет blue , так как переменная @color находится в локальном контексте.

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

Мои заметки предназначены в основном для начинающих веб-мастеров. Несмотря на это, опытные разработчики также найдут здесь что-нибудь интересное для себя.

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

10 примеров использования LESS для вашего сайта

LESS, Sass и другие CSS-препроцессоры — отличный способ для разработчика расширить возможности CSS. Переменные, операции с цветами, примеси (mixins) и многие другие инструменты LESS помогут разработчику почувствовать выгоду от написания меньшего количества кода при достижении равноценных результатов (без использования LESS).

Самым большим «барьером» на пути освоения LESS является то, что разработчик должен понять, чего именно он хочет добиться от этих инструментов. Эта статья поможет вам выйти на правильный путь в освоении LESS. В ней представлены 10 невероятно полезных фрагментов LESS кода (еще их называют «сниппетами»), которые вы можете начать использовать в вашем проекте уже сейчас.

Об использовании LESS

В последнее время я углубленно изучаю возможности LESS и Sass и пытаюсь выяснить как оптимально использовать эти инструменты в своей работе. Начав использовать эти инструменты разработчики поражаются тому сколько сил и времени они экономят.

Сегодня я расскажу о полезных фрагментах LESS кода, которые вы можете скопировать в ваш проект.

Как этим пользоваться?

Я предлагаю читателю скопировать весь приведенный в статье код в отдельный файл .less, возможно добавить какие-то свои «штрихи» и создать своего рода LESS шаблон, который затем использовать в своих последующих проектах.

Храните этот файл отдельно от .less файлов, специально созданных для ваших проектов и просто импортируйте его в текущий проект, используя команду

Это позволит вам содержать код вашего проекта в порядке, тем не менее используя мощные примеси (mixins) из шаблона. По завершении работы над проектом, перед выгрузкой его в сеть вы просто скомпилируете весь LESS в обычный CSS, используя такие инструменты как Less.app или CodeKit.

Если я использую Sass

Если до настоящего момента вы использовали Sass – нет проблем. Оба этих инструмента – замечательные и я без проблем смог перейти с использования одного на другой. К счастью, оба инструмента очень похожи между собой по синтаксису команд.

К тому же, есть отличная страничка на GitHub , где сравнивается синтаксис LESS и Sass. С ее помощью вы сможете сделать преобразования кода из LESS в Sass и наоборот за считанные секунды.

Итак, давайте приступим к делу.

Закругление уголков у блоков (border-radius)

CSS-правило border-radius одно из самых основных и часто используемых на данный момент. Овальные уголки у блоков без труда помогут сделать дизайн сайта более привлекательным.

Основной особенностью этого правила, является то, что старые версии браузеров FF и Chrome его не поддерживают, используя «свои» правила с префиксами. С помощью LESS мы можем избавить себя от кучи неприятностей, используя примеси (mixins) для добавления браузерных префиксов.

1. Примеси со значением по-умолчанию

Наш первый фрагмент LESS — самый простой. Поскольку мы собираемся делать все 4 овальных уголка с одинаковым радиусом, нам необходима всего лишь одна переменная, в которой будет хранится значение и которую в последствии можно будет изменить.

Первая часть кода, представленного ниже создает примесь(mixin), а во второй мы с легкостью можем вызвать код примеси и добавить закругленные уголки любому элементу, при этом не забывая про поддержку устаревших браузеров. Все, что нам нужно, это написать .border-radius(); и мы получим овальные уголки радиусом 5px (значение по-умолчанию в первом сниппете) со всех 4 сторон блока с учетом префиксов браузера. Если вы захотите поменять радиус, просто введите новое значение внутри круглых скобок.

После компиляции LESS в CSS мы получим примерно следующий код.

2. Примесь с параметром — передаем значение border-radius

Если вы не хотите ограничивать себя стандартными значениями, а указать значение радиуса у каждого уголка блока, то вам нужна более продвинутая возможность примесей.

Сейчас мы создадим такую примесь, передадим в нее 4 параметра: по одному для каждого уголка. Обратите внимание, что первый параметр — это значение радиуса левого верхнего угла, затем правого верхнего и так далее. Получается, что мы «обходим» блок по часовой стрелке.

Скомпилированный CSS будет следующим.

На самом деле из двух приведённых выше вариантов кода вы можете использовать второй вариант. Несмотря на то, что он делает все то же самое, что и первый, а его объем больше, он более гибкий в настройке, потому что принимает параметры закругления каждого уголка блока.

Добавление тени к блоку (box-shadow)

Далее рассмотрим другое часто используемое правило CSS3: box-shadow. Для корректного применения этого правила необходимо использовать три различных варианта его написания: обычный и с учетом префиксов браузеров. Опять же, гораздо проще передать LESS всю «тяжелую» работу.

Правилу передаются значения в следующем порядке: горизонтальное смещение тени, вертикальное смещение тени, радиус размытия и прозрачность.

После компиляции получим следующий CSS.

Переходы между двумя состояниями элемента (transition)

Переходы между двумя состояниями элемента – одна из самых удивительных возможностей CSS3, доступных разработчикам на данный момент. В то же время, они могут добавить много забот в процессе кодинга, так как плохо поддерживаются браузерами. Поэтому для поддержки максимального числа браузеров, необходимо написать пять различных вариантов этого CSS-правила, учитывая все префиксы.

Сейчас мы ощутим всю выгоду использования LESS: обратите внимание на длину строки кода, где вызывается примесь (mixin). Теперь не нужно набирать на клавиатуре такой длинный код каждый раз, когда вы будете использовать transition , а код в результате будет тот, который нам нужен.

CSS-трансформации

При трансформации объектов с помощью CSS доступны 4 варианта изменения объекта: вращение (rotate), масштабирование (scale), наклон (skew) и сдвиг (translate). Создание и размещение 6 различных вариантов кода – тяжелая работа! В этом случае нас спасет LESS.

Градиенты

При создании градиентов – используется одно из самых объемных правил CSS3. LESS предоставляет миллион различных возможностей для оптимизации работы с градиентами в CSS3. Ниже вы сможете ознакомиться с парой из них: в первом примере использования LESS с градиентами градиент состоит из двух цветов, код из второго примера может применяться к блоку с любым фоновым цветом.

Илон Маск рекомендует:  Что такое код fdf_set_ap

В этой примеси вы может задавать следующие параметры для простого линейного градиента: направление, начальный цвет и конечный цвет.

2. Фоновый градиент

Одним из самых неприятных моментов при использовании градиентов в CSS является определение цветов. Иногда вам нужно по-быстрому создать градиент поверх фонового цвета элемента. Это реализуется при помощи следующей примеси.

Смысл заключается в том, что начальным цветом этого градиента является прозрачный, а конечным – черный непрозрачный. Все это размещается поверх фона элемента. Все что от вас требуется – это указать позицию от которой будет начинаться градиент и показатель полупрозрачности и вы получите прекрасный фоновый градиент.

Отражение (в браузерах webkit)


Отражения пока еще не самая широко поддерживаемая часть CSS3, поэтому здесь она описывается в большей степени как «информация для общего развития».

Некоторое время назад я создал урок на эту тему , в котором также описано как добиться интересных эффектов при добавлении градиента к блокам с отражением в браузерах webkit. До сих пор информация из него очень помогает разработчикам.

Все что вам нужно при использовании LESS кода, приведенного ниже – это указать непрозрачность и высоту отражения. В этом нет ничего сложного.

Цветовые вычисления

Одной из самых уникальных возможностей LESS и Sass является проведение различных вычислений с цветами. Вы можете взять какой-то один базовый цвет и с помощью LESS автоматически создать целую палитру. Ознакомьтесь с парой примеров.

1. Комплементарная цветовая схема

В этом примере мы берем один базовый цвет, а затем при помощи функций spin , lighten и darken подбираем еще 4 цвета, которые вместе образуют палитру отлично сочетающихся цветов. Чтобы сгенерировать комплементарную цветовую схему, нам нужно передать функции spin аргумент со значение 180, что «повернуть» цветовой круг на 180 градусов и добавить несколько цветов, близких к базовому цвету.

2. Одноцветная (монохроматическая) цветовая схема

Комплементарная цветовая схема выглядит довольно эффектно, но учитывая то, что в последнее время минималистичный дизайн стал довольно популярным, если вы решите создать сайт в таком стиле, то вам понадобиться подобрать цвета по одноцветной (монохроматической) цветовой схеме на основе базового цвета.

Заключение

Итак, подведем итог. Основная задача этой статьи – показать на примерах то, как можно работать с LESS. Возможно после прочтения вы задумаетесь об применении LESS для решения своих повседневных задач. Используя LESS в своей работе, вы сэкономите кучу времени, которое сможете потратить на что-то другое.

Представление 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 (ее можно скачать с официального сайта).

В нашем уроке мы покажем другой способ. Мы будем использовать компилятор LESS: для Windows можно применять WinLess, а для Mac OSX — LESS.app.

Создаем файл .less в рабочей директории. Затем открываем компилятор (WinLESS или LESS.app) и импортируем рабочую директорию в него. компилятор найдет все файлы .less . И все. Теперь, когда бы мы не изменили файл .less , компилятор автоматически будет генерировать обычный код CSS в файл .css , который воспринимается браузером.

Остается только привязать CSS файл к документу HTML:

Синтаксис LESS

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

Переменные

Сначала рассмотрим переменные.

При работе с CSS вы вероятно часто сталкивались с ситуацией, когда повторяющееся значение устанавливалось в нескольких блоках по всей таблице стилей.

Все прекрасно, пока не придется просеивать 1000 одинаковых участков кода по всей таблице стилей, чтобы поменять значение. Такая ситуация может сложиться при работе над большим проектом.

При использовании препроцессора LESS такая проблема легко решается с помощью переменных . Переменные позволяют хранить значения, которые можно многократно использовать в таблице стилей.

В выше приведенном примере в переменной @color-base сохраняется значение #2d5e8b . И когда потребуется изменить цвет, то нужно будет поменять значение только в переменной.

В переменной можно использовать и другие значения:

Примешивания

В LESS можно использовать примешивания для хранения набора правил и применения их в других наборах. Например:

В Выше приведенном примере мы устанавливаем цвет градиента в классе .gradients . Затем, когда нужно добавить градиент, нужно просто вставить .gradients следующим образом:

Класс .box наследует все объявления из .gradients . Поэтому выше приведенное выражение LESS эквивалентно следующему обычному коду CSS:

При работе с CSS3 можно использовать библиотеку LESS ELements, чтобы облегчить свою работу. LESS Elements является коллекцией общих примешиваний CSS3, которые часто используются в стилях, например, border-radius , gradients , drop-shadow и так далее.

Чтобы использовать LESS нужно просто добавить правило @import файл LESS. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.

Теперь можно использовать все классы из elements.less . Например, чтобы добавить скругление углов рамки с радиусом 3px к элементу div , нужно написать:

Вложенные правила

При работе с обычным CSS кодом, достаточно часто встречается следующая структура кода:

В обычном CSS коде мы выбираем наследников, указывая родителя в каждом наборе правил.

В LESS можно улучшить выше приведенный набор правил с помощью вложения наследников в родительский элемент:

Также можно использовать псевдо-классы, например :hover , с помощью символа амперсенда (&). Допустим, мы хотим добавить :hover к тегу ссылки:

Операции

Также можно использовать операции в LESS. Доступны сложение, вычитание, умножение и деление.

Допустим, что элемент B в два раза выше элемента A:

Сначала мы определяем переменную @height и назначаем ее для указания высоты элемента А.

В элементе В мы просто умножаем значение переменной на 2. Теперь, когда мы изменяем значение переменной @height , элемент В всегда будет в два раза выше.

Область видимости

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

В приведенном примере header имеет переменную для цвета со значением black, но фон элемента nav будет иметь цвет blue, так как переменная @color находится в локальном контексте.

Заключение

LESS — один из препроцессоров CSS. Можно также использовать SASS или Stylus.

В следующих уроках серии мы разберем пример реального использования LESS и некоторые полезные аспекты инструментария.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.hongkiat.com/blog/less-basic/
Перевел: Сергей Фастунов
Урок создан: 18 Октября 2012
Просмотров: 49315
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Вложения в Less

Less это препроцессор CSS, а это значит: less (надстройка языка CSS) расширяет язык CSS, добавляет возможность использовать переменные, функции, примеси, и много других техник, которые, в свою очередь, позволяют сделать CSS управляемым и расширяемым.

Less работает внутри Node, в браузере, и внутри Rhino. Есть также много сторонних инструментов, которые позволяют компилировать ваши файлы и наблюдать за изменениями.

Использование на клиентской стороне

Использование less.js в браузере отлично подойдет для разработки, но не рекомендуется для производства (релиза).

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


Свяжите ваш документ с .less файлом через атрибут rel со значением stylesheet/less .

Затем, скачайте less.js и подключите его в тег script , который, в свою очередь, вставьте в тег head . Стилевой файл должен идти перед тегом script (как обычно).

Опции браузера

Опции, определяющие настройки глобального объекта Less , поставьте перед тегом script :

Переменные

Это довольно очевидно:

Обратите внимание: все переменные фактически являются ‛константами“, так как они могут быть определены лишь один раз.

Примеси

Примеси являются одним из способов подключить набор свойств из одного правила в другое правило. Итак, например, мы имеем следующий класс:

И мы хотим использовать эти свойства внутри другого правила. Для этого просто положите имя класса туда, где вы хотите определить этот набор свойств, например:

Свойства из .bordered появятся в #menu a и в .post a . (Отметьте, что в качестве примеси можно использовать и #id ).

Примеси с параметрами

Опционально после имени примеси можно ставить круглые скобки.

Примесям можно передавать аргументы, которые в качестве переменных используются в блоке примеси.

Применяем в различных правилах:

Параметры в примесях могут иметь значения по умолчанию:

Как вариант, допустимый вызов примеси:

И будет подключен 5px border-radius:

Вы также можете использовать примеси, которые не принимают параметры. Это полезно, если вы захотите спрятать примесь в CSS, при этом сама примесь будет использоваться (внутри блока объявлений).

Примеси с несколькими параметрами

Параметры разделяются запятой или точкой с запятой. Рекомендуется использовать точку с запятой. Запятая имеет двойной смысл: ее можно интерпретировать как разделитель для разделения примесей или как разделитель селекторов в CSS.

Использование запятой в качестве разделителя аргументов у примеси делает невозможным создание списка CSS как аргумента. Другими словами, если компилятор видит по крайней мере одну точку с запятой при вызове примеси, он предполагает, что разделителем является точка с запятой и все запятые относятся к спискам CSS:

  • Два аргумента и каждый содержит запятую: .name(1, 2, 3; something, else)
  • Три аргумента и каждый содержит одну цифру: .name(1, 2, 3)
  • Используется фиктивная точка с запятой, чтобы создать примесь с одним аргументом, который содержит запятые: .name(1, 2, 3;)
  • Значение по умолчанию с разделителем запятой: .name(@param1: red, blue;)

Вполне допустимо определять несколько примесей с одним и тем же именем и количеством параметров. Если вы используете примесь с одним параметром, например, .mixin(green);, затем свойства всех примесей с точно таким же обязательным параметром будут использованы:

Примеси как функции

Возвращение значений из примеси.

Все переменные, определенные в примеси, могут быть использованы в вызывающей области видимости (если в вызывающей области видимости уже не определена переменная с таким же именем).

Таким образом, переменные определенные в примеси можно использовать как возвращаемые значения. Это позволяет создать примесь, которая может быть использована почти как функция. Например:

Сдерживатели примеси

Сдерживатели ( if-else ) (Guards), в отличие от простых значений, полезны, когда вы хотите получить соответствие шаблону, . Если вы знакомы с функциональным программированием, вы наверняка сталкивались с ними.

Пытаясь не отходить от декларативной природы CSS, Less реализовал выполнение условий через сдерживание примесей, вместо использования операторов if/else , в духе использования медиа-запросов.

When это ключевое слово, которое вводит сдерживание.

До версии 1.5 вы могли использовать следующий код:

Вы можете комбинировать условие с & , например:

Операторы сравнения для сдерживании

Полный список операторов сравнения для сдерживания: > , >= , = , = , . Кроме того, ключевое значение true делает эквивалентными следующие две примеси:

Любое значение кроме ключевого слова true является ложью ( false ).

Отметьте, вы можете сравнить аргументы друг с другом или с не-аргументами.

Циклы

В Less примеси могут вызывать сами себя. Такие рекурсивные примеси в сочетании со сдерживателями и шаблонами соответствия, могут быть использованы для создания циклов.

Общие пример использования рекурсивного цикла, который создает классы для CSS сетки.

Группировка селекторов. Назначение псевдо-класса :extend() в Less

Проще говоря, псевдокласс :extend() автоматизирует следующий процесс:

  1. Отыскать селекторы с одинаковыми свойствами.
  2. Выбрать базовый селектор.
  3. Перечислить все найденные селекторы в объявлении базового селектора.
  4. Все новые селекторы добавить в список селекторов базового объявления.

Появилось в v1.4.0

В указанном выше правиле селектор :extend будет применять «расширяющий селектор» ( nav ul ) на класс .inline где бы ни появился класс .inline. Блок декларации останется как есть, без каких-либо ссылок к расширению (т.к. расширение – это не CSS).

В результате получим:

Обратите внимание, как селектор nav ul:extend(.inline) преобразовывается на выходе как nav ul — расширение удаляется перед выводом, а блок селектора остается неизменным. Если в тот блок не вложено никаких свойств, он удаляется из вывода (но расширение по-прежнему может влиять на другие селекторы).

Синтаксис :extend()

Псевдокласс :extend() либо присоедине к селектору, либо размещен в наборе правил. Он выглядит как псевдо-класс с параметром селектора, опционально следующим за ключевым словом all :

Расширение селекторов может содержать один или несколько классов, разделенных запятыми. Например:

Расширение селекторов, присоединенный к селектору

Расширение селекторов, присоединенное к селектору, выглядит как обычный псевдо-класс с параметром в виде селектора. Селектор может содержать несколько extend, но все они должны стоять в конце селектора.

  • Extend после селектора: pre:hover:extend(div pre) .
  • Между селектором и extend можно ставить пробел: pre:hover :extend(div pre) .
  • Можно ставить несколько extend: pre:hover:extend(div pre):extend(.bucket tr) — То же самое, что и pre:hover:extend(div pre, .bucket tr)
  • А вот так нельзя: pre:hover:extend(div pre).nth-child(odd) . Extend должен стоять в конце.

Если набор правил содержит несколько селекторов, у любого из них может быть Extend. Несколько селекторов с extend в одном наборе правил:

Контекстная группировка

Расширение селекторов (Extend) можно размещать внутри набора правил с помощью синтаксиса &:extend(selector) . Размещение псевдокласса :extend() в теле является своеобразным ярлыком для размещения его в каждом селекторе этого набора правил.

Extend внутри набора правил:

То же самое, что и добавление extend после каждого селектора:

Группировка внутренних селекторов

Extend может группировать внутренние селекторы. Например:

В результате получим:

По сути, расширение просматривает скомпилированный CSS, а не оригинальный Less-код. Например:

Точное совпадение с Extend

Расширение селекторов (Extend) по умолчанию ищет точные совпадения между селекторами. Неважно, использует ли селектор «ведущую звезду». Неважно, что два N-ных выражения имеют одинаковое значение, они должны быть одинаково сформированы, чтобы совпадать. Единственное исключение – кавычки в селекторе атрибута, т.к. Less считает, что у них одинаковое значение и они совпадают.

Ведущая звезда не играет роли. Селекторы *.class и .class эквивалентны, но extend не будет сравнивать их:

В результате получим:

Порядок псевдо-классов имеет значение. Cелекторы link:hover:visited и link:visited:hover соответствуют одинаковому набору элементов, но extend рассматривает их как разные:


В результате получим:

N-ное выражение

Форма N-ного выражения не имеет значения. N-ные выражения 1n+3 и n+3 эквивалентны, 3эквивалентны, но extend не будет их сравнивать:

В результате получим:

Тип кавычек в селекторе атрибута не важен. Все следующие записи эквивалентны.

В результате получим:

«all» в Расширении селекторов

Когда вы указываете ключевое слово «all» последним в аргументе псевдокласса :extend() , — это говорит Less сравнить этот селектор с частью другого селектора. Селектор скопируется и совпавшая часть селектора только тогда заменится расширением, создав новый селектор. Например:

Илон Маск рекомендует:  Что такое код asp servervariables

В результате будем иметь такие CSS стили:

Вы можете считать, что этот вариант операции по сути совершает обычный поиск и замену.

Интерполяция селекторов с Расширением селекторов

Расширение селекторов НЕ может сравнивать селекторы с переменными. Если селектор содержит переменную, расширение проигнорирует ее. Для этого существует запрос функции ожидания, но это не простая замена. Однако, расширение можно присоединить к интерполированному селектору.

Селектор с переменной не будет сравниваться:

А расширение с переменной в целевом селекторе ни с чем не совпадает:

Оба предыдущих примера компилируются в:

Однако, :extend , присоединенное к интерполированному селектору будет работать:

Предыдущий LESS компилируется в следующий CSS:

Охват / Расширение селекторов внутри @media

Расширение селекторов, написанное внутри медиа-декларирования должно совпадать только с селекторами внутри того же самого медиа-декларирования:

Расширения селекторов верхнего совпадают со всем, включая селекторы внутри встроенного медиа:

Выявление дубликатов

Пока что дубликаты не обнаружены. Например:

В результате получим:

Случаи использования расширений

Классический

Классический случай использования – избегать добавления базового класса. К примеру, если у вас есть

и вы хотите, чтобы у вас был подтип animal, который переопределит фоновый цвет, то у вас есть два варианта. Первое — изменить HTML-код

или создать упрощенный код и использовать расширение в Less, например

Уменьшение размера CSS

Примеси копируют все свойства в селектор, что может привести к ненужному дублированию. Таким образом, вы можете пользоваться расширениями, а не примесями, чтобы переместить селектор к свойствам, которые вы хотите использовать, что приведет к созданию меньшей CSS. Пример с примесью:

В результате получим:

Пример (с расширением селекторов):

В результате получим:

Комбинирование стилей / Более продвинутая примесь

Другой случай использования – альтернатива примесям, т.к. примеси могут использоваться только с простыми селекторами, если у вас есть два разных HTML-блока, но вам нужно применить к ним одинаковый стиль, вы можете использовать расширения. Например:

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

Мои заметки предназначены в основном для начинающих веб-мастеров. Несмотря на это, опытные разработчики также найдут здесь что-нибудь интересное для себя.

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

10 примеров использования LESS для вашего сайта

LESS, Sass и другие CSS-препроцессоры — отличный способ для разработчика расширить возможности CSS. Переменные, операции с цветами, примеси (mixins) и многие другие инструменты LESS помогут разработчику почувствовать выгоду от написания меньшего количества кода при достижении равноценных результатов (без использования LESS).

Самым большим «барьером» на пути освоения LESS является то, что разработчик должен понять, чего именно он хочет добиться от этих инструментов. Эта статья поможет вам выйти на правильный путь в освоении LESS. В ней представлены 10 невероятно полезных фрагментов LESS кода (еще их называют «сниппетами»), которые вы можете начать использовать в вашем проекте уже сейчас.

Об использовании LESS

В последнее время я углубленно изучаю возможности LESS и Sass и пытаюсь выяснить как оптимально использовать эти инструменты в своей работе. Начав использовать эти инструменты разработчики поражаются тому сколько сил и времени они экономят.

Сегодня я расскажу о полезных фрагментах LESS кода, которые вы можете скопировать в ваш проект.

Как этим пользоваться?

Я предлагаю читателю скопировать весь приведенный в статье код в отдельный файл .less, возможно добавить какие-то свои «штрихи» и создать своего рода LESS шаблон, который затем использовать в своих последующих проектах.

Храните этот файл отдельно от .less файлов, специально созданных для ваших проектов и просто импортируйте его в текущий проект, используя команду

Это позволит вам содержать код вашего проекта в порядке, тем не менее используя мощные примеси (mixins) из шаблона. По завершении работы над проектом, перед выгрузкой его в сеть вы просто скомпилируете весь LESS в обычный CSS, используя такие инструменты как Less.app или CodeKit.

Если я использую Sass

Если до настоящего момента вы использовали Sass – нет проблем. Оба этих инструмента – замечательные и я без проблем смог перейти с использования одного на другой. К счастью, оба инструмента очень похожи между собой по синтаксису команд.

К тому же, есть отличная страничка на GitHub , где сравнивается синтаксис LESS и Sass. С ее помощью вы сможете сделать преобразования кода из LESS в Sass и наоборот за считанные секунды.

Итак, давайте приступим к делу.

Закругление уголков у блоков (border-radius)

CSS-правило border-radius одно из самых основных и часто используемых на данный момент. Овальные уголки у блоков без труда помогут сделать дизайн сайта более привлекательным.

Основной особенностью этого правила, является то, что старые версии браузеров FF и Chrome его не поддерживают, используя «свои» правила с префиксами. С помощью LESS мы можем избавить себя от кучи неприятностей, используя примеси (mixins) для добавления браузерных префиксов.

1. Примеси со значением по-умолчанию

Наш первый фрагмент LESS — самый простой. Поскольку мы собираемся делать все 4 овальных уголка с одинаковым радиусом, нам необходима всего лишь одна переменная, в которой будет хранится значение и которую в последствии можно будет изменить.

Первая часть кода, представленного ниже создает примесь(mixin), а во второй мы с легкостью можем вызвать код примеси и добавить закругленные уголки любому элементу, при этом не забывая про поддержку устаревших браузеров. Все, что нам нужно, это написать .border-radius(); и мы получим овальные уголки радиусом 5px (значение по-умолчанию в первом сниппете) со всех 4 сторон блока с учетом префиксов браузера. Если вы захотите поменять радиус, просто введите новое значение внутри круглых скобок.

После компиляции LESS в CSS мы получим примерно следующий код.

2. Примесь с параметром — передаем значение border-radius

Если вы не хотите ограничивать себя стандартными значениями, а указать значение радиуса у каждого уголка блока, то вам нужна более продвинутая возможность примесей.

Сейчас мы создадим такую примесь, передадим в нее 4 параметра: по одному для каждого уголка. Обратите внимание, что первый параметр — это значение радиуса левого верхнего угла, затем правого верхнего и так далее. Получается, что мы «обходим» блок по часовой стрелке.

Скомпилированный CSS будет следующим.

На самом деле из двух приведённых выше вариантов кода вы можете использовать второй вариант. Несмотря на то, что он делает все то же самое, что и первый, а его объем больше, он более гибкий в настройке, потому что принимает параметры закругления каждого уголка блока.

Добавление тени к блоку (box-shadow)

Далее рассмотрим другое часто используемое правило CSS3: box-shadow. Для корректного применения этого правила необходимо использовать три различных варианта его написания: обычный и с учетом префиксов браузеров. Опять же, гораздо проще передать LESS всю «тяжелую» работу.

Правилу передаются значения в следующем порядке: горизонтальное смещение тени, вертикальное смещение тени, радиус размытия и прозрачность.

После компиляции получим следующий CSS.

Переходы между двумя состояниями элемента (transition)

Переходы между двумя состояниями элемента – одна из самых удивительных возможностей CSS3, доступных разработчикам на данный момент. В то же время, они могут добавить много забот в процессе кодинга, так как плохо поддерживаются браузерами. Поэтому для поддержки максимального числа браузеров, необходимо написать пять различных вариантов этого CSS-правила, учитывая все префиксы.


Сейчас мы ощутим всю выгоду использования LESS: обратите внимание на длину строки кода, где вызывается примесь (mixin). Теперь не нужно набирать на клавиатуре такой длинный код каждый раз, когда вы будете использовать transition , а код в результате будет тот, который нам нужен.

CSS-трансформации

При трансформации объектов с помощью CSS доступны 4 варианта изменения объекта: вращение (rotate), масштабирование (scale), наклон (skew) и сдвиг (translate). Создание и размещение 6 различных вариантов кода – тяжелая работа! В этом случае нас спасет LESS.

Градиенты

При создании градиентов – используется одно из самых объемных правил CSS3. LESS предоставляет миллион различных возможностей для оптимизации работы с градиентами в CSS3. Ниже вы сможете ознакомиться с парой из них: в первом примере использования LESS с градиентами градиент состоит из двух цветов, код из второго примера может применяться к блоку с любым фоновым цветом.

В этой примеси вы может задавать следующие параметры для простого линейного градиента: направление, начальный цвет и конечный цвет.

2. Фоновый градиент

Одним из самых неприятных моментов при использовании градиентов в CSS является определение цветов. Иногда вам нужно по-быстрому создать градиент поверх фонового цвета элемента. Это реализуется при помощи следующей примеси.

Смысл заключается в том, что начальным цветом этого градиента является прозрачный, а конечным – черный непрозрачный. Все это размещается поверх фона элемента. Все что от вас требуется – это указать позицию от которой будет начинаться градиент и показатель полупрозрачности и вы получите прекрасный фоновый градиент.

Отражение (в браузерах webkit)

Отражения пока еще не самая широко поддерживаемая часть CSS3, поэтому здесь она описывается в большей степени как «информация для общего развития».

Некоторое время назад я создал урок на эту тему , в котором также описано как добиться интересных эффектов при добавлении градиента к блокам с отражением в браузерах webkit. До сих пор информация из него очень помогает разработчикам.

Все что вам нужно при использовании LESS кода, приведенного ниже – это указать непрозрачность и высоту отражения. В этом нет ничего сложного.

Цветовые вычисления

Одной из самых уникальных возможностей LESS и Sass является проведение различных вычислений с цветами. Вы можете взять какой-то один базовый цвет и с помощью LESS автоматически создать целую палитру. Ознакомьтесь с парой примеров.

1. Комплементарная цветовая схема

В этом примере мы берем один базовый цвет, а затем при помощи функций spin , lighten и darken подбираем еще 4 цвета, которые вместе образуют палитру отлично сочетающихся цветов. Чтобы сгенерировать комплементарную цветовую схему, нам нужно передать функции spin аргумент со значение 180, что «повернуть» цветовой круг на 180 градусов и добавить несколько цветов, близких к базовому цвету.

2. Одноцветная (монохроматическая) цветовая схема

Комплементарная цветовая схема выглядит довольно эффектно, но учитывая то, что в последнее время минималистичный дизайн стал довольно популярным, если вы решите создать сайт в таком стиле, то вам понадобиться подобрать цвета по одноцветной (монохроматической) цветовой схеме на основе базового цвета.

Заключение

Итак, подведем итог. Основная задача этой статьи – показать на примерах то, как можно работать с LESS. Возможно после прочтения вы задумаетесь об применении LESS для решения своих повседневных задач. Используя LESS в своей работе, вы сэкономите кучу времени, которое сможете потратить на что-то другое.

Начинаем работатать

Обзор Less, как скачать и использовать, примеры и др.

Начинаем работатать с Less

Less является препроцессором CSS. Он расширяет язык CSS, добавляя такие возможности, как переменные, миксины, функции и многие другие техники, которые сделают Ваш CSS более поддерживаемым, «темизируемым» (да-да, речь про поддержку стилистически единых тем оформления) и расширяемым.

Less можно запустить внутри Node, в браузере и в Rhino. Существует множество сторонних инструментов, которые позволяют компилировать Less файлы и отслеживать изменения. Наиболее легкий способ попробовать Less — использовать наш онлайн редактор.

Например, запись на Less:

превратится после компиляции в

Использование Less

Less можно использовать в командной строке через npm, загружать как скрипт в браузер, или использовать в самых разных инструментах сторонних разработчиков. Дополнительную информацию см. в разделе Использование.

Установка

Самый простой спосок установить Less на сервере – использовать npm, менеджер пакетов node.js, примерно так:

Использование из командной строки (cli)

После установки вы можете вызвать компилятор из командной строки, вот так:

Результат компиляции будет выведен stdout . Чтобы сохранить результат CSS в файл, укажите имя этого файла:

Для вывода минифицированный CSS, можно использовать плагин clean-css . Когда плагин установлен, минификация вывода CSS задается опцией —clean-css :

To see all the command line options run lessc without parameters or see Usage.

Usage in Code

You can invoke the compiler from node, as such:

which will output

Configuration

You may pass some options to the compiler:

See Usage for more information.

Third Party Tools

See the Usage section for details of other tools.

Each Less release contains also rhino-compatible version. Command line rhino version requires two files: * less-rhino- .js — compiler implementation, * lessc-rhino- .js — command line support. Command to run the compiler: «« java -jar js.jar -f less-rhino- .js lessc-rhino- .js styles.less styles.css «« This will compile styles.less file and save the result to styles.css file. The output file parameter is optional. If it is missing, less will output the result to `stdout`.

Client-s >

Using less.js in the browser is great for development, but it’s not recommended for production

Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.

To start off, link your .less stylesheets with the rel attribute set to » stylesheet/less «:

Next, download less.js and include it in a tag in the element of your page:

  • Make sure you include your stylesheets before the script.
  • When you link more than one .less stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.
  • Due to the same origin policy of browsers loading external resources requires enabling CORS

Browser Options

Options are defined by setting them on a global less object before the :

Or for brevity they can be set as attributes on the script and link tags (requires JSON.parse browser support or polyfill).

Где взять Less

Загрузка через браузер

Загрузка исходного кода

Загрузите свежую версию исходников Less напрямую с GitHub.

Клонировать или форкнуть на GitHub

Форкните проект и отправьте нам pull request!

Установка через Bower

Установите скрипт less.js, запустив следующую команду:

Подключение Less через CDN

Вопросы по лицензии

Less is released under the Apache 2 License (though there are plans to dual license it). Copyright 2009-2020, Alexis Sellier and the Less Core Team (see about). Boiled down to smaller chunks, it can be described with the following conditions.

It allows you to:

  • Freely download and use Less, in whole or in part, for personal, company internal or commercial purposes
  • Use Less in packages or distributions that you create

It forbids you to:

  • Redistribute any piece of Less without proper attribution

It requires you to:

  • Include a copy of the license in any redistribution you may make that includes Less
  • Provide clear attribution to The Less Core Team for any distributions that include Less

It does not require you to:

  • Include the source of Less itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Submit changes that you make back to the Less project (though such feedback is encouraged)

The full Less license is located in the project repository for more information.

Less and these docs are maintained by the core Less team.

Documentation source code released under the MIT License, documentation under CC BY 3.0.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL