Полезные свойства Less на практике

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

1. Родительские селекторы (Parents Selectors “&”)
Оператор (&) представляет родительские селекторы вложенного правила и наиболее часто используется при применении класса модификации или псевдо-класса к существующим селекторам.

  1. Базовый пример

Screenshot_1

2. Более интересный пример.  В данном примере, мы создаем посредством оператора — & новые классы, не повторяя себя и не усложняя код.

Screenshot_2

3. Множественно использование родительских селекторов. В данном примере с помощью вариативного использования селектора и оператора & мы получаем в компилированном коде —  4 разных селектора.

Screenshot_3

4. Множественно использование родительских селекторов в каскаде. Здесь стоит обратить внимание на последовательность и степень вложенности родительских селекторов при использовании оператора &.

Screenshot_4

5. В данном примере меняем очередность вызова оператора & в каскаде.

Screenshot_5

6. Комбинированное использование оператора родительских элементов. Если мы используем оператор & в каскаде со знаком +, тогда в компилированном коде получим все возможные комбинации родительских селекторов (в данном случае 2 селектора умножаются друг на друга и получаем максимальную комбинацию — 4).

Screenshot_6

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

Screenshot_7

2. Охранники (Mixin Guards)

В Less нет условий, но есть охранники (guards). Они используются для того, чтобы выполнить разные объявления одного миксина в зависимости от разных условий.

1. Данный пример хорошо иллюстрирует возможности и надобности использования гардов. Мы используем миксин и в аргументах указываем переменную, далее гарды определяют какой именно миксин, будет отрабатывать на нашей переменной. Наглядно ниже пример с “color”.

Screenshot_18

 

2. В данном примере мы используем 2 миксина с гардами. Первый используется для совместного использования transition + transform, второй миксин используется когда мы объявляем только один transition без каких либо параметров transform. Более наглядно в примере.

Screenshot_17

3. Стоит отметить что гарды работают не только с ключом when. Также гарды понимают операторы сравнения (Guard comparison operators):

>, >=, =, =<, <, а также значение true

логические операторы (Guard logical operators);
проверку функций (Type checking functions):
Базовые:
iscolor, isnumber, isstring, iskeyword, isurl.
Специальные:
ispixel, ispercentage, isem, isunit , condition.

3. Использование миксинов как функции

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

Screenshot_19

2. В данном примере вызывается возврат переменной с миксина.

Screenshot_20

4. Рекурсии (Recoursive) и петли (Loops)

В Less нет циклов, но есть рекурсия. Это значит, что миксин может вызвать сам себя.
Рекурсивные миксины в комбинации с гардами и его операторами могут быть использованы для создания итеративных или «зациклированных» структур.
1. Базовый пример итерации рекурсивного миксина.

Screenshot_23

2. Вызов рекурсии (html/less)

Screenshot_21

3. Компилированный CSS и видимый результат

Screenshot_22

4. Разное

1. Игнорирование компилятором не компилируемого.
В LESS есть символы которые компилятор обработать не в состоянии, и он постоянно будет выдавать нам ошибку. В 99% случаев, нам не понадобятся способы его обойти. Представленный ниже пример никогда не скомпилируется в CSS, но для создания и отображения градиента старыми версиями Internet Explorer необходим filter, и для этого нам необходимо его обойти. Вариант решения представлен ниже.

В данном случае нельзя прописывать переменные в значении filter, потому что все, что находится в  ~” ”  передаются как есть.

Screenshot_9

3. Слияние через комму.
Слияние особо востребовано при создании миксинов с несколькими значениями (например transition, transform).

Screenshot_10

4. Слияние без коммы

Screenshot_11

5. Использование медиа запросов с помощью миксинов (пример)

Screenshot_12

 

6. Использование медиа запросов с помощью миксинов (mobile-first)

Screenshot_13

 

8. Миксин без дополнительных символов.

Screenshot_17-first

Кроме вышеизложенного у LESS’a есть еще много интересных вещей, которые несомненно помогут писать красивый и функциональный код.

Добавить комментарий

Ваш e-mail не будет опубликован.

*

code