SASS'te Fonksiyonlar

Bu derste fonksiyonların nasıl kullanılacağını inceleyeceğiz. Fonksiyonlar, mixin'lere bir yönüyle benzer, ancak değerlerini değiştirebilen parametreler eklemeye izin verir.

Haydi, yazı tipi boyutunu ayarlayacak bir func fonksiyonu yapalım. Boyutun bir parametre ile iletileceğini ve parametrenin bir değişken olacağını varsayalım:

styles.scss$font-size: 10px;

Daha sonra fonksiyona $n parametresini yazıyoruz ve fonksiyon gövdesinde mutlaka @return kullanıyoruz:

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

Derleme sonucu:

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

Ayrıca fonksiyona isimlendirilmiş bir argüman da iletebilirsiniz. Önceki örneğin koşullarını yeniden yazalım:

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

Ve styles.css dosyasında aynı kodu göreceğiz:

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