Sử dụng mixin trong SASS

Sau khi chúng ta đã khai báo một mixin chúng ta gọi nó bằng chỉ thị @include, chỉ thị này bắt buộc phải bao gồm tên của mixin. Ngoài ra, trong đó tùy chọn có thể có các tham số và kiểu. Hãy xem ví dụ:

@mixin mix{
	width: 100px;
	height: 100px;
}
div {
	@include mix;
	padding: 4px;
	margin-top: 10px;
}

Kết quả biên dịch:

div {
	width: 100px;
	height: 100px;
	padding: 4px;
	margin-top: 10px;
}

Có thể gọi mixin ngay trong phần gốc của tài liệu, nhưng chỉ trong trường hợp khi chúng không mô tả các quy tắc và trong chúng không có tham chiếu đến phần tử cha. Hãy xem ví dụ tiếp theo:

@mixin active {
	p {
		color: #161618;
		background-color: red;
	}
}
@include active;

Sau khi biên dịch chúng ta sẽ thấy:

p {
	color: #161618;
	background-color: red;
}

Hãy cho biết, kết quả biên dịch của đoạn mã sau sẽ là gì:

@mixin font {
	font-family:'Courier New', Courier, monospace;
	font-size: 12px;
}

#product-card {
	@include font;
	color: #090957;
	font-weight: 600px;
}

Hãy cho biết, kết quả biên dịch của đoạn mã sau sẽ là gì:

@mixin style {
	color:#090957;
}

button, link {
	@include style;
	font-size: 10px;
	padding: 4px;
}

Hãy cho biết, kết quả biên dịch của đoạn mã sau sẽ là gì:

@mixin active-text {
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	color: blue;
}

#product-card, .active, .content {
	@include active-text;
	padding: 4px;
}

Hãy cho biết, kết quả biên dịch của đoạn mã sau sẽ là gì:

@mixin size {
	font-size: 14px;
	padding: 10px;
	margin: 4px;
}

@mixin color {
	color: #580909;
	background-color: #e9e5ab;
}

#product-card {
	@include size;
	@include color;
	width: 600px;
}