Mešanice v LESS

V tej lekciji se bomo seznanili z mešanicami (mešanjem), ki omogoča vključevanje enega razreda v notranjost drugega. Poglejmo si, kaj so in kako delujejo.

V bistvu je mešanje uporaba enih razredov znotraj drugih, ko je en razred predloga - določen del kode, ki ga lahko uporabimo na številnih mestih.

Zakaj je to priročno? V čistem CSS bi morali vpisovati predlogo kode povsod, kjer je potrebna, v LESS pa jo lahko napišemo na enem mestu in jo nato povežemo v zahtevana mesta kode.

Poglejmo si primer. Recimo, da imamo naslednji razred:

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

Uporabimo ta razred kot mešanico:

styles.lessp {
  .mix;
  color: red;
}

Kot rezultat se bodo po prevajanju v odstavek vstavili slogi našega razreda:

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

styles.less.mix {
  color: white;
  background: black;
}

p {
  .mix;
  width: 300px;
}