К содержанию

LESS-de klasslary giňeltmek

Miksiniň ýetmezçiligi bu ýerde kodyň köpeldilmegidir. Mysal üsti bilen, näme üçin şeýle diýilýändigine seredeliň.

Bizde aşakdaky kod bolsun:

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

Bu kod aşakdaky ýaly kompirlener we kodyň köpeldilmegine getirer:

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

Has giňişleýin bolardy, eger bu kod aşakdaky ýaly kompirlense:

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

Buna &:extend buýrugy ýardymynda ýetmek bolýar, bu bellenen klassy kod üýtgetmez, ýöne giňeldýär. Geliň kodymyzy düzeliň:

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

Задание 1

Aşakdaky kodyň kompilýasiýasynyň netijesi nähili boljakdygy barada gürrüň beriň:

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

Задание 2

Aşakdaky kodyň kompilýasiýasynyň netijesi nähili boljakdygy barada gürrüň beriň:

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

Задание 3

Aşakdaky kodyň kompilýasiýasynyň netijesi nähili boljakdygy barada gürrüň beriň:

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

Задание 4

Aşakdaky kodyň kompilýasiýasynyň netijesi nähili boljakdygy barada gürrüň beriň:

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

Задание 5

Aşakdaky kodyň kompilýasiýasynyň netijesi nähili boljakdygy barada gürrüň beriň:

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