Chuỗi mở rộng (Chained Extensions) trong @extend của SASS

Chỉ thị @extend cũng hỗ trợ mở rộng theo chuỗi (tuần tự), tức là một bộ chọn có thể được mở rộng bởi một bộ chọn khác, bộ chọn đó, đến lượt nó, lại được mở rộng bởi một bộ chọn thứ ba. Ví dụ:

Hãy xem xét ví dụ:

.warning {
	border: 1px solid;
	background-color: #ffd900;
}
.personalWarning {
	@extend .warning;
	border-width: 3px;
}
.systemWarning {
	@extend .personalWarning;
	position: center;
}

Như chúng ta thấy từ kết quả biên dịch, tất cả các phần tử có lớp .systemWarning cũng có kiểu của các lớp .warning và .personalWarning:

.warning, .personalWarning, .systemWarning {
	border: 1px solid;
	background-color: #ffd900;
}
.personalWarning, .systemWarning {
	border-width: 3px;
}
.systemWarning {
	position: center;
}

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ như thế nào:

div {
	font-size: 10px;
	color: #181402;
}

.main-block {
	@extend div;
	border: 2px solid orange;
}

#warning-text {
	@extend .main-block;
	margin-top: 10px;
}

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ như thế nào:

p {
	padding: 10px;
}

.main-text {
	font-weight: 800px;
}

.card {
	@extend p;
	color: #021338;
}

.product-card {
	@extend .card, .main-text;
	font-size: 12px;
}

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ như thế nào:

p {
	padding: 5px;
}

.main-text {
	@extend p;
	font-size: 14px;
}

.card {
	@extend .main-text;
	border: 1px solid black;
}

.product-card {
	@extend .card;
	background-color: #e1f1f1;
}