Переменные в Less


Содержание

Использование переменных в LESS. Секреты LESS-переменных

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

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

Приведенные выше примеры ориентированы на использование переменных для управления значеними в правилах CSS, но они также могут быть использованы в других местах, а также, например, в именах селекторов, названиях свойств, URL и @import statements.

Селекторы

Операторы импорта

Синтаксис: @import «@/tidal-wave.less»;

Отметим, что до v2.0.0, только переменные, которые были объявлены в корневом, или текущей области были рассмотрены, и что только текущий файл и вызывающие файлы были рассмотрены при поиске переменной.

Свойства

Имена переменных

Кроме того, можно определять переменные с именем переменной:

Ленивая загрузка

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

Валидный Less сниппет:

Это код также валиден:

Оба скомпилируются в:

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

Переменные по умолчанию

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

Это работает хорошо, потому что Отложенная загрузка — основной цвет отменен, а темный цвет – темно-красный.

Изучаем 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 . Вы можете видеть их в правом углу окна под оповещением о статусе.

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

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

  • 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

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);, затем свойства всех примесей с точно таким же обязательным параметром будут использованы:

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

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

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

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

Илон Маск рекомендует:  Обзор браузера Safari. История, плюсы и минусы браузера

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

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

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

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

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

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

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

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

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

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

Циклы

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

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

Переменные в Less

Юрий Матюхин
Декабрь, 2012

Основные темы:

  • Что такое LESS
  • Как использовать LESS
  • Синтаксис LESS
    • Переменные
    • Примеси (обычные и с параметром)
    • Вложенные правила
    • Операции и Функции
    • Комментарии, импортирование и экранирование
  • Дополнительная информация

Что такое LESS

LESS – это надстройка над CSS, которая расширяет CSS динамическими возможностями, такими как переменные, примешивания, операции и функции.

Любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Следовательно существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.

Как использовать LESS

Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету или скомпилировать его заранее и использовать получившийся CSS файл.

Используем LESS и Javascript файл (1 способ):

Препроцессор LESS, начиная с простого

И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS, а мне говорят: «Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?» Что же делать?

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

Компиляция LESS и VS Code

Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less. Как это работает?

  1. Создаем файл стилей c расширением .less
  2. После сохранения, автоматически сгенерируется .css файл в ту же папку.


Каждый раз при сохранении изменений, LESS файлы компилируются в CSS файлы. Браузеры ещё не научились понимать LESS, им нужен CSS код.

Переменные LESS

Наиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: «В чем прикол? Все равно мне нужно что-то прописывать, какая разница?»

Главная фишка — это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS. Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.

@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;

Теперь пишем обычный код, как мы это делали в CSS, но вместо значений подставляем переменные.

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

Миксины (mixin) в LESS

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

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

.button_font <
font-family: «DIN Pro Bold»;
text-transform: uppercase;
font-size: 18px;
>

Примешиваем миксин в свойства селектора кнопки.

.portfolio__button <
padding: 15px 80px;
color: #344258;
.button_font;
>

На выходе получаем:

.portfolio__button <
padding: 15px 80px;
color: #344258;
font-family: «DIN Pro Bold»;
text-transform: uppercase;
font-size: 18px;
>

Символ амперсанд

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

Медиа-запросы в LESS

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

Заключение

Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS. Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Примеси в LESS

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

    Вспоминаем переменные [1/30]

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

    Для начала давайте вспомним, как создавать переменные и задавать им значения.

    1. Цель 1 Создайте переменную @red со значением #ff4136 .
    2. Цель 2 Создайте класс .red , в нём задайте цвету фона значение @red .
    3. Цель 3 Монстру .monster-happy задайте в HTML класс red .

    Примеси [2/30]

    Ещё одна интересная возможность LESS — примеси. Мы можем «примешивать» содержимое одного CSS-правила в другое. Для этого нужно написать имя «примешиваемого» правила внутри другого правила. Рассмотрим пример:

    Этот LESS-код скомпилируется в такой CSS:

    Как мы видим, в правиле, где была «вызвана» примесь .white , появилось её содержимое.

    Чтобы не выводить саму примесь в CSS, нужно после объявления примеси поставить скобки:

    При применении примеси скобки писать необязательно.

    1. Цель 1 Для монстра .monster-foolish примените в LESS примесь .red .
    2. Цель 2 Сделайте примесь .red невыводимой в стили.

    Несколько примесей [3/30]

    К одному правилу можно применить несколько примесей одновременно. В таком случае примеси просто «вызываются» по очереди.

    1. Цель 1 Создайте примесь .paint-blue() , внутри неё задайте цвет фона @blue .
    2. Цель 2 Примените примесь .paint-blue() к монстру .monster-foolish .
    3. Цель 3 Создайте примесь .reduce() , внутри неё задайте ширину и высоту 150px .
    4. Цель 4 Примените примесь .reduce() к монстру .monster-foolish .

    Примесь с параметром [4/30]

    В примесь можно передавать параметры. Они указываются внутри скобок объявления примесей. Названия параметров начинаются с символа @ . Рассмотрим пример:

    Параметры позволяют сделать примеси более универсальными.

    1. Цель 1 Создайте примесь .paint() с параметром @color .
    2. Цель 2 Внутри примеси задайте свойству background-color значение @color .
    3. Цель 3 Примените примесь .paint() с параметром @green к монстру .monster-happy .

    Примесь с параметром, часть 2 [5/30]

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

    Давайте попрактикуемся в применении примесей с параметром.

    С помощью примеси .paint() покрасьте:

    1. Цель 1 монстра .monster-foolish в красный цвет,
    2. Цель 2 а монстра .monster-friendly в синий цвет.

    Значение параметра примеси по умолчанию [6/30]

    Параметризованные примеси можно сделать ещё универсальнее.

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

    Рассмотрим пример, в котором значение параметра по умолчанию указано, но не задействуется, так как в примесь передаётся явный параметр.

    В следующем примере примесь применяется без параметров, поэтому используется значение по умолчанию:

    1. Цель 1 Создайте переменную @yellow со значением #ffdc00 .
    2. Цель 2 В примеси .paint() задайте параметру @color значение по умолчанию @yellow .
    3. Цель 3 Примените примесь .paint() без параметров к монстру .monster-friendly .

    Примесь с несколькими параметрами [7/30]

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

    Попробуем передать в примесь несколько параметров.

    1. Цель 1 Создайте примесь .resize с двумя параметрами: @width и @height .
    2. Цель 2 Внутри примеси задайте ширине значение @width , а высоте — @height .
    3. Цель 3 Для монстра .monster-happy примените примесь .resize с параметрами 150px для ширины и высоты.

    Испытание: части головоломки [8/30]

    Проверим знания в испытании.

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

    В качестве подсказки мы уже применили несколько примесей ко всем кусочкам .piece . Удачи!

    Шаблоны примесей [9/30]

    Иногда бывает полезным изменить поведение примеси в зависимости от передаваемых параметров. Например, у нас есть примесь, задающая размер шрифта:

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

    Теперь можно вызывать эту примесь с названием шаблона и без него и, в зависимости от этого, получать соответствующие результаты:

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

    Давайте попробуем создать шаблон примеси и применить её для окраски монстров.

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


    1. Цель 1 Создайте примесь .paint() с первым параметром light и со вторым параметром @color .
    2. Цель 2 Внутри примеси задайте свойству background-color значение lighten(@color, 20%) .
    3. Цель 3 Примените примесь .paint() с первым параметром light и вторым параметром @red к монстру .monster-light .

    Шаблоны примесей, часть 2 [10/30]

    Теперь у нас есть примесь, раскрашивающая монстра в определённый цвет, и её шаблон, делающий цвет более светлым.

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

    В задании применяются встроенные в LESS функции lighten и darken для работы с цветом. Они рассматриваются в задании первой части курса по LESS.

    1. Цель 1 Создайте примесь .paint с первым параметром dark и со вторым параметром @color .
    2. Цель 2 Внутри примеси задайте свойству background-color значение darken(@color, 20%) .
    3. Цель 3 Примените примесь .paint с первым параметром dark и со вторым параметром @red к монстру .monster-dark .

    Шаблоны примесей, часть 3 (универсальный шаблон) [11/30]

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

    Универсальный шаблон применяется вместе с остальными шаблонами:

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

    Давайте применим к монстрам разные шаблоны и создадим универсальный шаблон, который применится одновременно со всеми остальными.

    1. Цель 1 Для монстра .monster-happy примените примесь .transform с первым параметром increase и со вторым параметром 50px ,
    2. Цель 2 а для .monster-foolish примените примесь .transform с параметрами decrease и 50px .
    3. Цель 3 Создайте шаблон примеси .transform с первым параметром @_ и со вторым параметром @size . Внутри задайте фоновый цвет @red .

    Обратите внимание, что универсальный шаблон .transform(@_; @size) применился к обоим монстрам.

    Испытание: примеси и портреты [12/30]

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

    Примесь с условием [13/30]

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

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

    Такая примесь применится, если «вызвать» её с параметром 1 . В противном случае примесь не применится.

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

    К примеру, в LESS есть встроенная функция lightness , которая принимает в качестве параметра значение цвета и возвращает степень его светлоты. Чёрный цвет обладает 0% светлоты, а белый — 100% . Вот пример её использования:

    Давайте создадим примесь, которая в зависимости от цвета текста, будет задавать контрастный фоновый цвет блока. Сначала сделаем вариант со светлым текстом и тёмным фоном.

    1. Цель 1 Примените примесь .set-color с параметром white к подписи .note .
    2. Цель 2 Создайте новую примесь .set-color с параметром @color и с условием lightness(@color) >= 50%
    3. Цель 3 и внутри неё задайте свойству background-color значение black .

    Примесь с условием, часть 2 [14/30]

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

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

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

    Снова воспользуемся примесью с условием и функцией lightness .

    1. Цель 1 Создайте примесь .set-color с параметром @color и с условием lightness(@color) . Внутри примеси задайте свойству background-color значение white .
    2. Цель 2 В CSS-правиле для .note измените в примеси параметр white на black .

    Условия и внешние переменные [15/30]

    Условия в примесях могут работать не только с параметрами, с которыми «вызвана» примесь, но и с переменными, объявленными вне примесей. Например, если создать примесь с условием, но без параметров:

    А потом создать внешнюю переменную и вызвать где-то примесь:

    То условие выполнится, созданная примесь отработает:

    То есть можно управлять условиями примесей с помощью внешних переменных.

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

    1. Цель 1 Создайте примесь .paint без параметров с условием @type = good и задайте внутри примеси background-color: #7fdbff; .
    2. Цель 2 Примените примесь .paint() к монстру .monster-happy .
    3. Цель 3 Создайте примесь .paint с условием @type = bad и задайте внутри background-color: #ff4136; .
    4. Цель 4 Смените значение переменной @type с good на bad .

    Условия и типы параметров [16/30]

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

    Илон Маск рекомендует:  MIME-типы в HTML

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

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

    Попробуем такой подход на практике.

    1. Цель 1 Создайте примесь .magic с параметром @parameter и условием iscolor(@parameter) . В ней задайте фоновый цвет со значением @parameter .
    2. Цель 2 Создайте вторую примесь .magic с параметром @parameter и условием isnumber(@parameter) . В ней задайте ширину и высоту равные @parameter .
    3. Цель 3 К монстру .monster-happy примените примесь .magic с параметром @red ,
    4. Цель 4 а к монстру .monster-foolish — с параметром 150px .

    Испытание: примеси и портреты, часть 2 [17/30]

    В этом испытании вам вновь предстоит поработать с портретами монстров.

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

    Пожалуйста, не меняйте применения примесей! Испытание нужно пройти только с помощью условий примесей.

    Переменные-вставки [18/30]

    Переменные можно использовать не только в значениях CSS-свойств, но и как составные части селекторов, названий свойств или как «кусочки» значений свойств. С помощью такой подстановки переменных, или Variable Interpolation, можно динамически формировать разные части CSS-правил.

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

    Из примеров выше скомпилируется такой CSS:

    в примере выше нужна для хитрого механизма экранирования LESS. Без неё «склеивание» переменной и единицы измерения не сработает.

    С помощью «переменных-вставок» можно формировать имена селекторов динамически в зависимости от определённых условий или в цикле. Эти приёмы мы рассмотрим далее в курсе.

    1. Цель 1 Создайте переменную @number и задайте ей значение 1 .
    2. Цель 2 Создайте пустое CSS-правило с селектором .monster-@ ,
    3. Цель 3 внутри него задайте цвет фона @red .
    4. Цель 4 Затем измените значение переменной @number на 2 .

    Обратите внимание какие CSS-классы при этом генерируются.

    Цикл [19/30]

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

    В примере создаётся «бесконечный» цикл с увеличивающейся переменной-счётчиком, который никогда не закончится. Чтобы рекурсия всё таки когда-нибудь прекращалась, к примеси добавляется условие выполнения:

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

    Для чего можно применять циклы? Например, для генерирования целых CSS-правил. Если в цикле в имени селектора использовать переменную-вставку из прошлого задания, то можно на выходе получить набор правил с разными селекторами. В примере ниже цикл исполняется три раза, в каждой итерации создастся правило с переменной-счётчиком @n в качестве суффикса селектора:

    Опробуем циклы на практике.

    1. Цель 1 Внутри .generate-colors создайте CSS-правило .monster-@ , а внутри него задайте цвет фона @red .
    2. Цель 2 Добавьте к примеси условие @n > 0 .
    3. Цель 3 В конце примеси рекурсивно примените её же .generate-colors(@n — 1);
    4. Цель 4 В вызове примеси .generate-colors(1) измените параметр 1 на 3 .

    Обратите внимание какие CSS-классы при этом генерируются.

    Цикл, часть 2 [20/30]

    Внутри «цикла» переменную-счётчик можно использовать не только в условиях или в селекторах, но и в значениях свойств.

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

    Давайте подставим в качестве аргумента функции spin переменную-счётчик @n , увеличенную в несколько раз, и посмотрим что будет!

    1. Цель 1 Внутри .monster-@ замените значение фонового цвета на spin(@red, @n * 10) ,
    2. Цель 2 затем на значение spin(@red, @n * 20)
    3. Цель 3 и, наконец, на spin(@red, @n * 100) .


    Испытание: разноцветные ступеньки [21/30]

    Теперь проверим знания о циклах.

    В испытании нужно сгенерировать правила для десяти ступенек ( .stair-1 … stair-10 ) с помощью примеси generate-stairs , которую нужно вызывать рекурсивно.

    Цвет отсчитывается от @base-color начиная с первой ступеньки и вычисляется с помощью функции spin в цикле. Шаг изменения цвета кратен 5 . Кстати, шаг может быть отрицательным или положительным.

    Ширина ступенек задаётся в процентах от ширины контейнера .stairs и кратна 10 .

    Вертикальный ритм текста [22/30]

    С помощью примесей и небольших вычислений можно красиво и быстро создать «вертикальный ритм» текста с заголовками, параграфами и списками. Мы уже немного рассказывали про «вертикальный ритм» в задании курса «Оформление текста с помощью CSS». В этой серии рассмотрим другой подход.

    Основу для вертикального ритма будет задавать переменная @line , в которой хранится высота одной «визуальной» строки текста. Крупные блоки текста, например, заголовки первого уровня h1 будут занимать три «визуальные» строки. Заголовки h2 и h3 будут занимать две строки. Обычный текст в параграфах будет однострочным. Размер шрифта при этом подберём так, чтобы текст при заданной высоте строки смотрелся гармонично.

    Между блоками текста (заголовками, параграфами, списками) нужно установить соразмерный отступ. По умолчанию сделаем его равным @line .

    Итак, в деле нам пригодятся две примеси: .set-font , которая устанавливает размер шрифта и высоту строки, и .set-margin для задания вертикальных отступов.

    В примеси .set-font для высоты строки и в .set-margin для верхнего и нижнего отступа зададим значение по умолчанию @line .

    Для наглядности мы добавили на страницу вертикальную «сетку», шаг которой тоже зависит от @line . В итоге все блоки текста должны будут «идти в ритм» с вертикальной сеткой.

    Начнём с выравнивания заголовков.

    1. Цель 1 К body примените миксин .set-font с параметром @line * 0.6 .
    2. Цель 2 К h1 примените .set-font с параметрами @line * 2, @line * 3 и .set-margin без параметров.
    3. Цель 3 К h2 примените .set-font с параметрами @line * 1.5, @line * 2 и .set-margin .
    4. Цель 4 К h3 примените .set-font с параметрами @line * 1.2, @line * 2 и .set-margin .

    Вертикальный ритм текста, часть 2 [23/30]

    Далее займёмся параграфами и списками.

    Для параграфов немного уменьшим размер шрифта относительно @line .

    Для списка просто добавим стандартные вертикальные отступы.

    А для элементов списка тоже немного уменьшим шрифт, как у параграфов, и зададим вертикальные отступы в половину величины @line

    Когда значения размера шрифта, высоты строки и отступов будут заданы, можно легко управлять всеми величинами с помощью одной переменной @line . При этом «вертикальный ритм» будет сохраняться.

    В конце можно убрать «сетку», чтобы увидеть, как гармонично смотрится текст.

    1. Цель 1 К p примените миксин .set-font с параметром @line * 0.8 .
    2. Цель 2 К ul примените .set-margin без параметров, а к li примените .set-font с параметром @line * 0.8 и .set-margin с параметрами @line / 2, @line / 2 .
    3. Цель 3 Переменной @line задайте значение 16px .
    4. Цель 4 У body уберите класс grid .

    Цвета блоков-оповещений [24/30]

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

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

    Избавиться от дублирования нам помогут примеси. Давайте вынесем повторяющий участок LESS-кода в примесь и будем применять её с разными параметрами к соответствующим блокам.

    В примеси .generate-colors :

    1. Цель 1 создайте переменную @bg-color и задайте ей значение lighten(@color, 35%) ,
    2. Цель 2 задайте цвет фона со значением @bg-color ,
    3. Цель 3 цвет текста со значением darken(@bg-color, 50%) ,
    4. Цель 4 цвет рамки со значением darken(spin(@bg-color, -10), 5%) .

    Цвета блоков-оповещений, часть 2 [25/30]

    Итак, примесь готова.

    Остаётся только применить её с подходящими параметрами ко всем блокам.

    Код стал компактнее, нет повторяющихся участков кода, и не создаются лишние переменные.

    Отсюда следует основное предназначение примесей — выделять повторяющийся код в отдельные блоки для последующего использования. Чем меньше дублируется код, тем его меньше. А чем меньше кода, тем ниже вероятность ошибок в нём. Профит!

    Примените примесь .generate-colors :

    1. Цель 1 для класса .alert-error с параметром @error-color ;
    2. Цель 2 для класса .alert-info с параметром @info-color ;
    3. Цель 3 для класса .alert-warning с параметром @warning-color ;
    4. Цель 4 для класса .alert-success с параметром @success-color .

    Примесь для центровки блока [26/30]

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

    Одна из самых распространённых задач — горизонтальное и вертикальное выравнивание блока относительно родительского контейнера.

    В этом задании давайте создадим примесь для быстрого выравнивания. Особенности этого метода:

    • блок позиционируется абсолютно внутри относительно спозиционированного контейнера,
    • у блока должны быть фиксированные ширина и высота,
    • центровка происходит за счёт нулевых координат top , right , bottom , left и автоматических внешних отступов.

    Попробуем этот метод на практике.

    1. Цель 1 В примеси .zero-centered задайте абсолютное позиционирование,
    2. Цель 2 координаты top , right , bottom и left равными 0 ,
    3. Цель 3 Для блока .centered-box задайте ширину и высоту равные 100px (так как блок может быть произвольных размеров, не будем включать задание ширины и высоты в примесь).
    4. Цель 4 В примеси .zero-centered задайте внешний отступ со всех сторон со значением auto .

    Примесь для треугольных форм [27/30]

    Ещё одна распространённая задача — реализовать блок треугольной формы с помощью CSS. Для её решения подходит управление шириной и цветом рамок, который мы уже рассматривали в серии заданий курса «Рамки и фоны, часть 2».

    Универсальную примесь для создания «треугольников» на CSS удобно держать в своём арсенале наготове, чтобы при необходимости просто написать одну строчку кода, не вспоминая подробности реализации.

    Итак, нам нужна примесь, которая будет принимать в качестве параметров: направление, в которое «смотрит» треугольник, его размер и цвет.

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

    В задании в LESS-код уже добавлена универсальная примесь .triangle , в которой заданы правила для всех «треугольников»: нулевые ширина и высота (так как мы будем работать с рамками, сами блоки будут невидимы), а также сплошной стиль рамки.

    Давайте применим примесь к блоку и зададим оставшиеся параметры рамки — цвет и толщину.

    1. Цель 1 Примените примесь .triangle с параметрами top , 100px и #ff4136 к блоку .triangle-box .
    2. Цель 2 В универсальном шаблоне примеси .triangle задайте толщину рамки @size
    3. Цель 3 и цвет рамки @color .

    Примесь для треугольных форм, часть 2 [28/30]

    Следующим шагом сделаем шаблон примеси для «треугольника», направленного вверх. Напомним, что к .triangle-box мы уже применили примесь с шаблоном top :

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

    1. Цель 1 Создайте шаблон примеси .triangle с именем top и параметрами @size и @color .
    2. Цель 2 В примеси задайте прозрачный цвет transparent левой и правой рамке,
    3. Цель 3 а верхнюю рамку уберите совсем, задав ей стиль border-top-style со значением none .

    Примесь для треугольных форм, часть 3 [29/30]

    Теперь остаётся создать шаблоны для остальных направлений «треугольной» примеси подобно сделанному варианту.

    Мы уже применили эти шаблоны примесей к блокам .triangle-box-top , .triangle-box-right , .triangle-box-bottom и .triangle-box-left с разными параметрами цвета. Вам остаётся написать нужное наполнение этих шаблонов.

    Создайте шаблоны right , bottom и left примеси .triangle .

    1. Цель 1 В шаблоне right задайте прозрачный цвет верхней и нижней рамке, а правой — стиль none .
    2. Цель 2 В шаблоне bottom задайте прозрачный цвет левой и правой рамке, а нижней — стиль none .
    3. Цель 3 В шаблоне left задайте прозрачный цвет верхней и нижней рамке, а левой — стиль none .

    Испытание: круглая стрелка с помощью рамки [30/30]

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

    Вам дан набор примесей, которые нужно применить для .arrow-round и его псевдоэлемента ::after . Все числовые значения примесей кратны 5 и задаются в пикселях.

    Как правильно использовать переменные в препроцессорах Less и Sass

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

    Предыстория

    В 2014 году в компании начали редизайн проекта и в основу вёрстки мы положили свежий на тот момент Bootstrap 3.0.1. Использовали мы его не как отдельную стороннюю библиотеку, а тесно заинтегрировали с нашим собственным кодом: отредактировали переменные под наш дизайн и компилировали кастомизированный Бутстрап из Less исходников самостоятельно. Проект оброс собственными модулями, которые использовали бутстраповские переменные и добавляли в файл с настройками свои новые переменные.

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

    Через год с небольшим редизайн закончился, проект вышел в продакшн, и мы взялись за технический долг. При попытке обновить Бутстрап до версии 3.6.x выяснилось, что смержить новый variables.less с нашим файлом настроек будет нелегко. В Бутстрапе переименовали или убрали часть переменных, добавили новые. Собственные компоненты Бутстрапа обновились без проблем, а вот наши компоненты падали при компиляции из-за этих изменений.

    Проблемы

    Мы проанализировали ситуацию и сформулировали проблемы.

    1. Слишком связанный код. Сами компоненты лежали в отдельных файлах. Это создавало иллюзию, что компоненты независимые. Но компоненты использовали переменные, объявленные во внешнем файле variables.less, и без этого файла не работали. Нельзя было просто так взять и переместить компонент в другой проект. Приходилось тянуть за собой файл с настройками, который со временем превратился в помойку.
    2. Слишком много глобальных переменных. У Бутстрапа было ≈400 переменных. Мы отключили неиспользуемые компоненты Бутстрапа, но переменные оставили в конфиге на случай, если снова понадобятся. Еще мы добавили сотню или полторы своих переменных. Все названия не запомнить, трудно быстро находить нужные. Даже с правилами именования и комментариями ориентироваться в конфиге из 500+ переменных тяжело.
    3. Имена глобальных переменных вышли из-под контроля. Одна и та же переменная могла использоваться в разных файлах и отслеживать все её появления в коде было долго и трудно. Когда меняли значение переменной в одном компоненте, был риск поломать другие компоненты. Разработчики хардкодили, создавали новые переменные с похожими названиями и значениями и уже не следили за логикой именования.

    Как решать

    Я придумал три правила, которые помогли побороть наши проблемы:

    1) Переменная используется только в том файле, в котором объявлена.

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

    2) Все переменные внутри компонента — локальные.

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

    3) Глобальные переменные используются только внутри файла настроек.


    Благодаря первым двум правилам мы сильно сократим количество глобальных переменных, но они всё равно нужны. Глобальные переменные объявляются в главном файле проекта или в файле типа config.less. К ним тоже применяется правило №1 — переменные не используются за пределами своего файла. Это значит, что нельзя использовать глобальные переменные внутри файлов компонентов. Но существует способ не нарушая первого правила прокинуть значение глобальной переменной внутрь компонента. Как это сделать мы рассмотрим на примерах далее.

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

    Применим правила на практике.

    Реализация на Less

    Представим простейший компонент для стилизации страницы. Согласно правилу №1 создадим переменные внутри файла компонента.

    Правило 1
    Переменная используется только в том файле, в котором объявлена.

    В примере выше мы объявили переменные в глобальной области видимости и из-за этого они подвержены конфликту имён. Если в соседнем компоненте появится переменная с таким же именем, то компоненты поломают друг друга.

    Локальные переменные

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

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

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

    По правилу №2 сделаем переменные локальными — переместим их внутрь селектора.

    Правило 2
    Все переменные внутри компонента — локальные.

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

    Миксины как функции

    В Less можно использовать миксины как функции. Если внутри миксина создать переменные, а потом вызвать миксин внутри селектора, то переменные будут доступны в области видимости этого селектора.

    Читайте про миксины как функции в документации Less.

    Вынесем объявление переменных внутрь миксина .page-settings() , а потом вызовем его внутри селектора .page :

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

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

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

    Слияние миксинов

    В Less существует «ленивое вычисление» переменных: не обязательно объявлять Less-переменную перед её использованием, можно объявить после. В момент компиляции парсер Less найдет определение переменной и отрендерит значение этой переменной в CSS.

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

    Итак, переменные можно объявлять и до, и после использования, а миксины — это разновидность переменных. Если создать два миксина с одним и тем же именем и разным содержанием, то они объединяют свои внутренности. А если внутри миксинов есть переменные с одинаковыми именами, то происходит переопределение. Приоритет выше у последнего миксина.

    Рассмотрим три файла:

    Всё самое интересное происходит в конфиге. Мы создали глобальные переменные и использовали их в этом же файле для кастомизации компонента.

    Миксин .page-settings() объявлен два раза. Первый раз внутри файла page.less с дефолтными значениями, второй раз в файле config.less с новыми значениями. На этапе компиляции миксины склеиваются, новые переменные переопределяют дефолтные и CSS рендерится с новыми значениями из файла конфигурации.

    Правило 3
    Глобальные переменные используются только внутри файла настроек.

    Обратите внимание, что config.less инклюдится последним в списке. Это нужно, чтобы объявление миксина в конфиге имело больший приоритет, чем исходное объявление в файле самого компонента. Настройки не применятся, если поставить config.less до компонента, потому что на миксины тоже действуют правило «последнее определение — самое сильное».

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

    1. переменные использовались только в своём файле, даже глобальные переменные не вызывались за пределами файла config.less ;
    2. переменные компонента остались локальными и не засорили глобальную область видимости;
    3. глобальные переменные не использовались внутри компонента напрямую, но значения глобальных переменных хитрым способом попали внутрь компонента.

    Ограничения

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

    Реализация в Sass

    Sass отличается от Less и больше похож на скриптовый язык программирования: нет «ленивых вычислений» и переменная должна быть обязательно объявлена до её использования в коде. Если определить переменную и использовать её в коде, а потом переопределить и использовать ещё раз, то в первый вызов получим исходное значение в CSS, а во второй вызов новое значение. Трюк с миксинами, как в Less, не пройдет. Но есть другие пути решения.

    Наборы переменных для настройки компонента удобно хранить в map-объектах. Это массив из пар «ключ: значение». Метод map-get извлекает конкретное значение из массива, метод map-mergeобъединяет два массива в один, дополняя или переписывая исходный массив.

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

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

    [1] — В компоненте мы сначала объявили переменную с пустым массивом $page-override .

    [2] — Потом проверили, а не существует ли уже переменная $page-settings . И если она уже была объявлена в конфиге, то присвоили её значение переменной $page-override .

    [3] — И потом смержили исходный конфиг и $page-override в переменную $page-settings .

    Если массив $page-settings был объявлен ранее в глобальном конфиге, то $page-override перепишет настройки при слиянии. Иначе в переменной $page-override будет пустой массив, и в настройках останутся исходные значения.

    Я не знаю всех тонкостей Sass, может есть способ реализовать эту методику более красивым способом.

    В результате, мы получаем всё те же преимущества, только в отличие от Less нам приходится переопределять все настройки заранее, перед их использованием в коде.

    Выводы

    Не важно на чем вы пишете — на Less, Sass, CSS c кастомными свойствами или Javascript — глобальных переменных должно быть как можно меньше.

    С CSS препроцессорами используйте три правила, которые помогут избежать хаоса:

    1. Переменная используется только в том файле, в котором объявлена.
    2. Все переменные внутри компонента — локальные.
    3. Глобальные переменные используются только внутри файла настроек.

    Чтобы прокинуть глобальные настройки внутрь компонента, собирайте переменные в миксин (Less) или map-объект (Sass).

    Переопределяйте настройки в правильном месте: в Less — после инклюда, в Sass — перед инклюдом.

    Реальные примеры

    Я сформулировал эту методику в декабре 2015 года для Less и с тех пор применяю её на рабочих и личных проектах.

    За полтора года появилось несколько публичных npm-пакетов. Посмотрите исходный код для лучшего понимания, как это работает в реальных ситуациях.

    Изучаем LESS: Переменные

    Дата публикации: 2020-01-16

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

    Итак, давайте рассмотрим переменные LESS и то, что вы можете с ними делать.

    Синтаксис

    Синтаксис LESS почти идентичен синтаксису CSS. Создатели LESS были очень предусмотрительны и сделали его полностью совместимым с CSS, это означает, что вы можете писать CSS прямо в файлах LESS. Это лучший из двух миров! Помните о том, что имена файлов LESS должны иметь расширение .less, а не .css.

    Переменные

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Программируемый язык стилей LESS

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

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

    Какие это могут быть ограничения. Например, цвет. Если мы видим запись вида #FF9F94 , то невозможно сходу установить, что она обозначает темно-персиковый цвет. Гораздо проще создать переменную, например darkPeach , присвоить ей значение #FF9F94 и далее в таблице стилей использовать эту переменную. Какие удобства это может за собой принести: не нужно помнить код цвета для указания его в другом месте, для смены одного цвета по всей таблице достаточно просто поменять значение переменной.

    Другими словами, CSS не хватает немного программирования и логики, чтобы сделать работу с ним более практичной. Хорошо, что для этого существует ряд инструментов, среди которых есть LESS.

    Что такое LESS?

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

    LESS – это скрипт, который может использоваться как на стороне клиента (CSS-таблица рассчитывается в браузере пользователя), так и на стороне. Однако существуют более удачные способы использовать LESS – например, предварительная компиляция таблицы. В таком случае можно получить стандартную таблицу стилей, которая будет правильно использоваться браузером и не требовать постоянно конвертировать ее заново.

    Переменные

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

    В данном случае переменная @serif-font хранит в себе название шрифта. Если нужно поменять шрифт Georgia на Times New Roman, то достаточно сменить значение переменной и значение шрифта изменится во всем документе. Еще удобнее использовать переменные с кодами цветов. Например, следующий отрывок CSS

    можно заменить следующим:

    Как видите, достаточно исправить цвета в заголовке вашего CSS-документа, чтобы исправить их по всему документу.

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

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

    Операции

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

    Как видно из кода выше, переменная @unit получает значение 3px . Оно подставляется в значение ширины границы. Отступы соответственно получаются умножением этого значения на 3 или 2 .

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

    Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет #B64141 — более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: #830E0E . На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.

    Работа с цветом

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

    Примеры использования и результаты отображения смотрите в таблице ниже:

    Каждый цвет в LESS конвертируется в HSL (hue, saturation, lightness), чтобы обеспечить вам контроль над уровнями каналов. Благодаря этому можно манипулировать цветами более тонко, а также получить информацию о цвете напрямую:

    Для чего это нужно? Нормальному человеку сложно распознать, какой цвет зашифрован HEX кодом, однако LESS работает не с самим кодом, а с тоном, который он задает. Допустим, вы нашли пурпурный цвет, который вам понравился ( #e147d4 ). Но сейчас вам нужен более сливочный его оттенок, тогда вам поможет следующая конструкция из двух функций:

    Вложенность

    Одним из основных достоинств CSS является каскадность обновления его стилей. То есть для задания стиля параграфа внутри контейнера article нужно использовать код:

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

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

    Примешивания (mixins)

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

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

    В данном случае мы создали и определили класс rounded-top , а затем импортировали все его правила в класс top . А все стили класа top импортированы в класс submit , в том числе и правила для фона и цвета текста.

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

    В данном случае в классе tab будет использоваться значение в 6px , а в классе submit в 3px . Параметры могут быть множественные.

    Более подробно прочитать и разобраться в работе LESS вы можете на сайте lesscss.org.

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

    Переменные, шаг 1

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

    В прошлом задании в коде встречалась подобная запись:

    Так в LESS описываются переменные. Синтаксис переменных такой:

    Создав переменную один раз, можно использовать её в любом месте кода. Например:

    Во всех местах, где указана переменная, LESS заменит строку @navy на #1d365d . Теперь, если понадобится изменить цвет, не нужно искать все его объявления в файле, а достаточно просто изменить значение переменной в одном месте.

    Попробуем использовать переменные в коде: зададим с помощью переменной основной цвет нашей цветовой схемы.

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