Fungsi dalam SASS

Dalam pelajaran ini kita akan membahas bagaimana cara menggunakan fungsi. Fungsi, agak mirip dengan mixin, tetapi memungkinkan untuk menambahkan parameter, yang dapat mengubah nilainya.

Mari kita buat fungsi func yang akan menentukan ukuran font. Biarkan ukurannya diteruskan sebagai parameter dan parameternya akan berupa variabel:

styles.scss$font-size: 10px;

Kemudian tuliskan parameter dalam fungsi $n dan wajib cantumkan dalam badan fungsi @return:

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

Hasil kompilasi:

styles.css#main {
  font-size: 20px;
}

Juga, argumen bernama dapat diteruskan ke fungsi. Mari kita tulis ulang kondisi dari contoh sebelumnya:

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

Dan di file styles.css kita akan melihat kode yang sama:

styles.css#main {
  font-size: 20px;
}

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

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

styles.scss$size: 2px;

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

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