К содержанию

Combinação de seletores em LESS

Às vezes, precisamos que, ao compilar estruturas aninhadas, elas sejam combinadas de forma contígua, e não com um espaço. Para isso, é necessário colocar um e comercial antes do nome do seletor aninhado:

styles.lessdiv {
  &.block {
    width: 300px;
  }
}

Como resultado, após a compilação, obteremos o seguinte código:

styles.cssdiv.block {
  width: 300px;
}

Задание 1

Explique qual será o resultado da compilação do seguinte código:

styles.less#block {
  &.xxx {
    width: 300px;
  }
}

Задание 2

Explique qual será o resultado da compilação do seguinte código:

styles.less#block {
  .xxx {
    width: 300px;
  }
}

Задание 3

Explique qual será o resultado da compilação do seguinte código:

styles.less#block {
  &.xxx {
    &.zzz {
      width: 300px;
    }
  }
}

Задание 4

Explique qual será o resultado da compilação do seguinte código:

styles.less#block {
  &.xxx {
    .zzz {
      width: 300px;
    }
  }
}

Задание 5

Explique qual será o resultado da compilação do seguinte código:

styles.less#block {
  .xxx {
    &.zzz {
      width: 300px;
    }
  }
}