Funktionen in SASS

In dieser Lektion werden wir uns ansehen, wie man Funktionen verwendet. Funktionen sind Mixins etwas ähnlich, erlauben aber das Hinzufügen von Parametern, deren Werte sich ändern können.

Lassen Sie uns eine Funktion func erstellen, die die Schriftgröße festlegt. Lassen Sie die Größe als Parameter übergeben werden und als Parameter soll eine Variable dienen:

$font-size: 10px;

Dann geben wir in der Funktion den Parameter $n an und weisen im Körper der Funktion zwingend @return an:

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

Ergebnis der Kompilierung:

#main {
	font-size: 20px;
}

Man kann der Funktion auch ein benanntes Argument übergeben. Schreiben wir die Bedingungen des vorherigen Beispiels um:

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

Und in der Datei styles.css werden wir denselben Code sehen:

#main {
	font-size: 20px;
}

Erzählen Sie, welches das Ergebnis der Kompilierung des folgenden Codes sein wird:

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

Erzählen Sie, welches das Ergebnis der Kompilierung des folgenden Codes sein wird:

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

Erzählen Sie, welches das Ergebnis der Kompilierung des folgenden Codes sein wird:

$size: 2px;

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

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