SASS-də Funksiyalar

Bu dərsdə biz funksiyalardan necə istifadə edəcəyimizi nəzərdən keçirəcəyik. Funksiyalar qismən mixinlərə bənzəyir, lakin eyni zamanda dəyərlərini dəyişə bilən parametrlər əlavə etməyə imkan verir.

Gəlin yazı ölçüsünü təyin edəcək func funksiyasını edək. Ölçü parametr kimi ötürülsün və parametr kimi dəyişən iştirak etsin:

$font-size: 10px;

Sonra funksiyaya $n parametrini yazırıq və mütləq funksiyanın gövdəsində @return göstəririk:

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

Kompilyasiya nəticəsi:

#main {
	font-size: 20px;
}

Həmçinin funksiyaya adlandırılmış arqument ötürülə bilər. Əvvəlki nümunənin şərtlərini yenidən yazaq:

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

Və styles.css faylında biz eyni kodu görəcəyik:

#main {
	font-size: 20px;
}

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

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

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

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

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

$size: 2px;

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

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