Mixinit LESSissä

Tässä oppitunnissa tutustumme mixinien (sekoittamiseen), joka mahdollistaa yhden luokan sisällyttämisen toisen sisään. Selvitetään, mikä se on ja kuinka sen kanssa työskennellään.

Pohjimmiltaan sekoittaminen on eri luokkien käyttöä toisten sisällä, kun yksi luokka on esivalmiste - tietty koodinpala, jota voimme käyttää monissa paikoissa.

Miksi tämä on kätevää? Puhtaassa CSS:ssä meidän pitäisi kirjoittaa esivalmiste koodia kaikkialle missä sitä tarvitaan, kun taas LESSissä voimme kirjoittaa sen yhteen paikkaan ja sen jälkeen liittää sen tarvittaviin kohtiin koodia.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on seuraava luokka:

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

Käytetään tätä luokkaa sekoittamisena:

p {
	.mix;
	color: red;
}

Tuloksena kääntämisen jälkeen kappaleeseen sijoitetaan luokkamme tyylit:

p {
	width: 100px;
	height: 100px;
	color: red;
}

Kerro, mikä on seuraavan koodin kääntämisen tulos:

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

p {
	.mix;
	width: 300px;
}