SASS-тегі функциялары

Бұл сабақта біз функцияларды қалай қолдануды қарастырамыз. Функциялар, бір жерден араластыруға ұқсас, бірақ сонымен бірге мәндерін өзгерте алатын параметрлерді қосуға мүмкіндік береді.

Әріп өлшемін белгілейтін func функциясын жасайық. Өлшем параметр ретінде берілсін және параметр ретінде айнымалы болсын:

$font-size: 10px;

Содан кейін функцияға $n параметрін жазамыз және функция денесінде @return міндетті түрде көрсетеміз:

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

Компиляция нәтижесі:

#main {
	font-size: 20px;
}

Сондай-ақ функцияға атаулы аргумент беруге болады. Алдыңғы мысалдың шарттарын қайта жазайық:

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

Және styles.css файлында біз дәл сол кодты көреміз:

#main {
	font-size: 20px;
}

Келесі кодтың компиляция нәтижесі қандай болатынын айтыңыз:

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

Келесі кодтың компиляция нәтижесі қандай болатынын айтыңыз:

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

Келесі кодтың компиляция нәтижесі қандай болатынын айтыңыз:

$size: 2px;

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

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