Mixinai LESS

Šioje pamokoje susipažinsime su mišiniais (mixinais), kurie leidžia įtraukti vieną klasę į kitos klasės vidų. Išsiaiškinkime, kas tai yra ir kaip su tuo dirbti.

Iš esmės mišinys yra vienų klasių naudojimas kitų klasių viduje, kai viena klasė yra ruošinys - tam tikras kodo gabaliukas, kurį galime naudoti daugelyje vietų.

Kuo tai patogu? Gryname CSS mes turėtume įvesti ruošinio kodą visur, kur jis reikalingas, o LESS galime jį parašyti vienoje vietoje ir vėliau prijungti prie reikiamų kodo vietų.

Pažiūrėkime pavyzdžiu. Tarkime, mes turime šią klasę:

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

Panaudokime šią klasę kaip mišinį:

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

Rezultate, po kompiliavimo, į pastraipą bus įterpti mūsų klasės stiliai:

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

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

p {
  .mix;
  width: 300px;
}