Міксіны ў 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;
}