Inheritance in SASS

Ta có thể kế thừa ruleset của một selector khác bằng cách dùng chỉ thị @extend:

/* This CSS will print because %message-shared is extended. */
%message-shared {
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
}
 
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
	display: flex;
	flex-wrap: wrap;
}
 
.message {
	@extend %message-shared;
}
 
.success {
	@extend %message-shared;
	border-color: green;
}
 
.error {
	@extend %message-shared;
	border-color: red;
}
 
.warning {
	@extend %message-shared;
	border-color: yellow;
}

Related

list
from [[Inheritance in SASS]]
sort file.ctime asc

Resources

• SASS - Extends/Inheritance