Міксіны ў LESS

У гэтым уроку мы пазнаёмімся з міксінамі (прымешваннем), якое дазваляе ўключаць адзін клас унутры іншага. Давайце разбярэмся, што гэта такое і як з гэтым працаваць.

Па сутнасці прымешванне гэта выкарыстанне адных класаў унутры іншых, калі адзін клас з'яўляецца загатоўкай - вызначаным кавалкам кода, які мы можам выкарыстоўваць у многіх месцах.

Чым гэта зручна? На чыстым CSS нам прыйшлося б набіраць загатоўку кода ўсюды дзе яна спатрэбяцца, а ў LESS можна напісаць яго ў адным месцы і за тым падключаць яго ў патрэбныя месцы кода.

Давайце паглядзім на прыкладзе. Хай у нас ёсць наступны клас:

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

Давайце выкарастаем гэты клас у якасці прымешвання:

p {
	.mix;
	color: red;
}

У выніку пасля кампіляцыі ў абзац падстаўяцца стылі нашага класа:

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

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

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

p {
	.mix;
	width: 300px;
}