Funktsioonid SASS-is

Selles õppetükis vaatleme, kuidas kasutada funktsioone. Funktsioonid on millessegi sarnased segamistega, kuid võimaldavad lisada parameetreid, mis saavad oma väärtusi muuta.

Teeme funktsiooni func, mis seab fondi suuruse. Laske suurust edastatakse parameetrina ja parameetriks olgu muutuja:

$font-size: 10px;

Seejärel kirjuta funktsiooni parameeter $n ja määra kindlasti funktsiooni kehas @return:

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

Kompileerimise tulemus:

#main {
	font-size: 20px;
}

Samuti saab funktsioonile edastada nimetatud argumendi. Kirjutame ümber eelmise näite tingimused:

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

Ja failis styles.css näeme sama koodi:

#main {
	font-size: 20px;
}

Rääkige, milline on kompileerimise tulemus järgnevast koodist:

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

Rääkige, milline on kompileerimise tulemus järgnevast koodist:

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

Rääkige, milline on kompileerimise tulemus järgnevast koodist:

$size: 2px;

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

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