Fungsi dalam SASS

Dalam pelajaran ini, kita akan melihat bagaimana untuk menggunakan fungsi. Fungsi, agak serupa dengan mixin, tetapi membolehkan penambahan parameter, yang boleh menukar nilainya.

Mari kita buat fungsi func, yang akan menetapkan saiz fon. Biarkan saiz dihantar sebagai parameter dan biarkan parameter tersebut menjadi pembolehubah:

$font-size: 10px;

Kemudian tentukan parameter dalam fungsi $n dan pastikan untuk menyatakan @return dalam badan fungsi:

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

Hasil kompilasi:

#main {
	font-size: 20px;
}

Anda juga boleh menghantar hujah bernama kepada fungsi. Tulis semula syarat contoh sebelumnya:

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

Dan dalam fail styles.css kita akan melihat kod yang sama:

#main {
	font-size: 20px;
}

Beritahu, apakah hasil kompilasi kod berikut:

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

Beritahu, apakah hasil kompilasi kod berikut:

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

Beritahu, apakah hasil kompilasi kod berikut:

$size: 2px;

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

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