Миксини у LESS-у

У овом уроку упознаћемо се са миксинима (убацивањем), који омогућавају укључивање једне класе унутар друге. Хајде да размотримо шта су то и како се са њима ради.

У суштини, миксини су коришћење једних класа унутар других, када једна класа представља шаблон - одређени део кода, који можемо користити на многим местима.

Шта је погодно са овим? На чистог CSS-а морали бисмо да уносимо шаблон кода свуда где је потребан, а у LESS-у можемо да га напишемо на једном месту и затим га повежемо на потребна места у коду.

Погледајмо на примеру. Претпоставимо да имамо следећу класу:

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

Користимо ову класу као миксин:

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

Као резултат, након компајлирања у пасус ће бити додати стилови наше класе:

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

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

p {
  .mix;
  width: 300px;
}