К содержанию

Concaténation des sélecteurs dans LESS

Parfois, nous avons besoin que lors de la compilation des constructions imbriquées, elles se concatènent de manière collée, et non pas avec un espace. Pour cela, il est nécessaire de placer une esperluette devant le nom du sélecteur imbriqué :

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

En conséquence, après la compilation, nous obtiendrons le code suivant :

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

Задание 1

Expliquez quel sera le résultat de la compilation du code suivant :

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

Задание 2

Expliquez quel sera le résultat de la compilation du code suivant :

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

Задание 3

Expliquez quel sera le résultat de la compilation du code suivant :

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

Задание 4

Expliquez quel sera le résultat de la compilation du code suivant :

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

Задание 5

Expliquez quel sera le résultat de la compilation du code suivant :

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