Միքսինները 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;
}