Вход

Синтаксис препроцессора Less

Синтаксис препроцессора Less

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

План:

  1. Комментарии
  2. Переменные
  3. Операторы
  4. Циклы
  5. Вложенные селекторы
  6. Импорт файлов Less и CSS
  7. Миксины
  8. Наследование

 

Комментарии в 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 /

11753 Views /

8 комментариев

Похожие записи:

Ilya Web developer
Author

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

Путь web разработчика. Фриланс или офис

Теги

Bootstrap bower cms CSS 3 framework Game Git github grid gulp ide JavaScript joomla jQuery js Less MySQL npm php pug SASS SEO smartgrid SMM SQL svg TypeScript Yii2 Администрирование Дизайн Реклама Репозиторий видеокурсы редакторы и ide