Миксини во 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;
}