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;
}