Синтаксис препроцессора Less
Препроцессоры существенно упрощают процесс сборки web проектов, но для этого необходимо знать и правильно использовать основные элементы языка. В этой статье мы рассмотрим синтаксис препроцессора Less.
План:
- Комментарии
- Переменные
- Операторы
- Циклы
- Вложенные селекторы
- Импорт файлов Less и CSS
- Миксины
- Наследование
Комментарии в Less
Less поддерживает однострочные и многострочные комментарии.
1 2 3 4 5 | //@color: #00f; /* @color: #f00; */ |
Переменные в Less
1 2 3 4 5 | @color: #00f; div{ background-color: @color; } |
Операторы
Препроцессор Less поддерживает следующие операторы: +, -, *, /, ()
1 2 3 4 5 6 7 8 9 10 | .block{ width:10px + 30px; } @w1 = 10px; @w2 = 30px; .block1{ width:(@w1 * @w2) / 3; } |
Циклы
1 2 3 4 5 6 7 | .block1(@j) when (@j < 3){ // условие цикла margin-left: @j + 100px; .block1(@j + 1); //устанавливаем шаг цикла } .block2{ .block1(1); } |
Реализуем баннерное меню используя цикл:
1 2 3 4 5 6 7 8 9 | .ban_raund(@n, @i:1) when (@i <= @n){ .ban_block .block@{i}{ width:100% / @n; height:100px; } .ban_raund(@n, @i + 1); } .ban_raund(3); |
результат:
1 2 3 4 5 6 7 8 9 10 11 12 | .ban_block .block1 { width: 33.33333333%; height: 100px; } .ban_block .block2 { width: 33.33333333%; height: 100px; } .ban_block .block3 { width: 33.33333333%; height: 100px; } |
1 |
Вложенные селекторы
Less поддерживает вложенность селекторов
1 2 3 4 5 6 7 8 9 10 | .block1{ color:#f00; .block2{ width:100px; } .block3{ width:200px; } } |
Запись с со знаком &:
Знак & означает что на его место подставляется ближайший родительский селектор.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .block1{ & .block2{ width:100px; } &.block3{ width:100px; } & + .block4{ width:100px; } &:hover{ width:200px; } } |
Результат:
1 2 3 4 5 6 7 8 9 10 11 12 | .block1 .block2{ width:100px; } .block1.block3{ width:100px; } .block1 + .block4{ width:100px; } .block1:hover{ width:200px; } |
Импорт файлов Less и CSS
Если у нас есть два файла с расширением Less или CSS и нам нужно один включить в другой, то используем следующую запись:
файл style1.less
1 2 | @import "style2.less"; //подключение файла less @import (less) "style3.css"; //подключение файла css (слово less указывает на то, что наш файл css нужно разобрать как less) |
Миксины
Миксины — это наследование свойств одного селектора другим.
1 2 3 4 5 6 7 8 9 10 11 | .block1{ width:100px; height:200px; } .block2{ background-color: #00f; .block1(); /*Возможна вариация без скобок*/ .block1; } |
Результат:
1 2 3 4 5 6 7 8 9 | .block1 { width: 100px; height: 200px; } .block2 { background-color: #00f; width: 100px; height: 200px; } |
Создание миксина со скобками не компилирует сам миксин, а лишь позволяет его наследовать!
Если сам миксин нам не нужен, а нужно только наследование, то можно использовать такую запись:
1 2 3 4 5 6 7 8 9 | .block1(){ width:100px; height:200px; } .block2{ background-color: #00f; .block1(); } |
Результат:
1 2 3 4 5 | .block2 { background-color: #00f; width: 100px; height: 200px; } |
Миксин с классом:
1 2 3 4 5 6 7 8 | .block1(){ .color_blue{ color:#00f; } } .block2{ .block1.color_blue; } |
Результат:
1 2 3 | .block2 { color: #00f; } |
Миксины с параметрами
Миксины с параметрами это аналог обычных функций с параметрами из других языков программирования.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /*Одноимённые миксины с разным количеством параметров и значениями по умолчанию*/ .block1(@w:20px, @h:10px){ width:@w; height:@h; } .block1(@w:20px, @h:10px, @c){ width:@w; height:@h; color:@c; } .block2{ .block1(100px, 50px); } .block3{ .block1(100px); } .block4{ .block1(100px, 20px, #f00); } .block5{ .block1(@w:100px, @h:20px); } |
Миксины с локальными переменными
После вызова миксина нам, для данного класса, становятся доступными его переменные.
1 2 3 4 5 6 7 8 | .block1(){ @w:100px; } .block2{ .block1; width:@w; } |
Миксины и аргументы
несколько параметров функции можно заменить массивом аргументов @arguments как во втором случае:
1 2 3 4 5 6 7 8 | /*Альтернативные записи*/ .block1(@m_top_bot:5px, $m_right_left:10px){ margin:@m_top_bot, $m_right_left; } .block2(@m_top_bot:5px, $m_right_left:10px){ margin:@arguments; } |
Наследование
Наследование стилей одного класса другим классом (можно наследовать и id)
&:extend(Имя класса, который наследуется);
Имён классов может быть несколько (перечисляются через запятую)
1 2 3 4 5 6 7 | .block1{ width:100px; } .block2{ &:extend(.block1); height:200px; } |
Если необходимо наследовать не только сам класс, но и цепочки где он встречался, то используем запись: &:extend(Имя класса all);
1 2 3 4 5 6 7 8 9 | div .block1{ height:100px; } .block1{ width:100px; } .block2{ &:extend(.block1 all); } |
При конфликте свойств приоритет имеет то свойство, которое записано не в наследуемом классе!
10 января 2018 /
11795 Views /
8 комментариев