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);
}