Συναρτήσεις στο SASS

Σε αυτό το μάθημα θα εξετάσουμε πώς να χρησιμοποιούμε συναρτήσεις. Οι συναρτήσεις, μοιάζουν κάπως με τα mixins, αλλά επιτρέπουν την προσθήκη παραμέτρων, που μπορούν να αλλάζουν τις τιμές τους.

Ας φτιάξουμε μια συνάρτηση 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);
}