SASS-da funksiýalar

Bu sapakda biz funksiýalary nädip ulanyp boljakdygyny gözden geçireris. Funksiýalar, birnäçe derejede meýletin görnüşleri ýatladýar, ýöne olaryň üstüne parametrler goşmaga rugsat berýär, olaryň bahalaryny üýtgedip bolýar.

Geliň, şrift ululygyny kesgitleýän func funksiýasyny düzeliň. Ululyk parametri arkaly geçirilsin we parametr hökmünde üýtgeýän ulanylsyn:

styles.scss$font-size: 10px;

Soňra funksiýada $n parametrini ýazyň we funksiýanyň gövdesinde @return görkezmegi hökmany ýerine ýetiriň:

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

Kompilýasiýanyň netijesi:

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

Şeýle hem, funksiýa atlandyrylan argument geçirilip bilner. Öňki mysalyň şertlerini gaýtadan ýazalyň:

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

We styles.css faýlynda biz şol bir kody göreris:

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