Hàm trong SASS

Trong bài học này, chúng ta sẽ xem xét cách sử dụng hàm. Hàm, có phần nào đó giống với mixin, nhưng cho phép thêm các tham số, có thể thay đổi giá trị của chúng.

Hãy tạo một hàm func, sẽ thiết lập kích thước phông chữ. Hãy để kích thước được truyền vào bằng một tham số và tham số đó sẽ là một biến:

$font-size: 10px;

Sau đó, chúng ta viết tham số $n trong hàm và bắt buộc phải chỉ định trong thân hàm @return:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func(2);
}

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

#main {
	font-size: 20px;
}

Ngoài ra, có thể truyền đối số có tên vào hàm. Hãy viết lại điều kiện của ví dụ trước:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func($n: 2);
}

Và trong tệp styles.css chúng ta sẽ thấy mã giống hệt:

#main {
	font-size: 20px;
}

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

$size: 10px;
@function func($num) {
	@return $num + $size;
}
div {
	font-size: func(4);
}

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

$size: 4px;
@function func($num) {
	@return $num + $size;
}
.card {
	padding: func(2);
	margin: func(6);
	width: func(416);
}

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

$size: 2px;

@function func($num) {
	@return ($num * $size) + 20;
}

.logo {
	width: func(2);
	height: func(4);
}