SASS에서 선택자 상속

스타일 작업 시 상속 관련 문제가 발생할 수 있습니다. 그러나 @extend 지시어를 사용하면 어떤 선택자가 다른 선택자의 스타일을 상속해야 하는지 명확하게 지정할 수 있기 때문에 이러한 문제를 쉽게 피할 수 있습니다. 예를 들어 살펴보겠습니다:

예를 들어 살펴보겠습니다:

.warning {
	border: 1px solid;
	background-color: #ffd900;
}

.personalWarning {
	@extend .warning;
	border-width: 3px;
}

이제 컴파일 결과를 살펴보겠습니다:

.warning, .personalWarning {
	border: 1px solid;
	background-color: #ffd900; }

.personalWarning {
	border-width: 3px; 
}

다음 코드의 컴파일 결과가 어떻게 될지 설명해보세요:

#product-card {
	color: #302f2f;
	font-family: 'Times New Roman', Times, serif;
}

#product-card-title {
	@extend #product-card;
	font-weight: 600px;
}

이전 문제의 조건을 변경하여 #product-card가 #product로부터 500px의 너비를 상속받도록 하세요.