SASS-da Funktsiyalar

Ushbu darsda biz funktsiyalardan qanday foydalanishni ko'rib chiqamiz. Funktsiyalar, aralashmalarga o'xshaydi, lekin bunda parametrlar qo'shish imkoniyati mavjud bo'lib, ularning qiymatlarini o'zgartirish mumkin.

Keling, shrift o'lchamini belgilaydigan func funktsiyasini yarataylik. O'lcham parametr orqali uzatilsin va parametr sifatida o'zgaruvchi ishtirok etsin:

styles.scss$font-size: 10px;

Keyin funktsiyaga $n parametrini yozamiz va funktsiya tarkibida @return ni ko'rsatish shart:

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

Kompilyatsiya natijasi:

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

Bundan tashqari, funktsiyaga nomlangan argument ham uzatish mumkin. Oldingi misol shartlarini qayta yozamiz:

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

Va styles.css faylida biz aynan shu kodni ko'ramiz:

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