К содержанию

Uitbreiden van klassen in LESS

Het nadeel van mixins is dat het leidt tot duplicatie van code. Laten we met een voorbeeld kijken wat daarmee wordt bedoeld.

Stel dat we de volgende code hebben:

styles.less.mix {
  width: 100px;
  height: 100px;
}
p {
  .mix; 
  color: red;
}

Deze code wordt als volgt gecompileerd, wat duplicatie veroorzaakt:

styles.css.mix {
  width: 100px;
  height: 100px;
}
p {
  width: 100px;
  height: 100px;
  color: red;
}

Het zou compacter zijn als deze code als volgt zou worden gecompileerd:

styles.css.mix, p {
  width: 100px;
  height: 100px;
}
p {
  color: red;
}

Dit kan worden bereikt door gebruik te maken van de opdracht &:extend, die niet de mixin rechtstreeks in de code plaatst, maar de opgegeven klasse uitbreidt. Laten we onze code corrigeren:

styles.less.mix {
  width: 100px;
  height: 100px;
}
p {
  &:extend(.mix); 
  color: red;
}

Задание 1

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less.mix {
  color: red;
  font-size: 20px;
}
p {
  &:extend(.mix); 
  width: 300px;
}

Задание 2

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less.mix {
  color: red;
  font-size: 20px;
}
#block p {
  &:extend(.mix); 
  width: 300px;
}

Задание 3

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less.mix {
  color: red;
  font-size: 20px;
}
#block p, #block div {
  &:extend(.mix); 
  width: 300px;
}

Задание 4

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less.mix {
  color: red;
  font-size: 20px;
}
#block {
  width: 300px;
  
  p {
    height: 100px;
    &:extend(.mix);
  }
  div {
    height: 200px;
    &:extend(.mix);
  }
}

Задание 5

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less.mix1 {
  color: red;
}
.mix2 {
  font-size: 20px;
}
div {
  width: 300px;
  &:extend(.mix1);
  &:extend(.mix2);
}