Функсияҳо дар SASS

Дар ин дарс мо мефаҳмем, ки чӣ тавр аз функсияҳо истифода барем. Функсияҳо, ба тарзе ба примешивание монаданд, аммо ҳамзамон имконияти илова кардани параметрҳоро медиҳанд, ки метавонанд қиматҳои худро тағйир диҳанд.

Биёед функсияи func созем, ки андозаи ҳарфро муқаррар мекунад. Бигзор андоза ба воситаи параметр гузаронида шавад ва ҳамчун параметр тағйирёбанда иштирок кунад:

styles.scss$font-size: 10px;

Сипас параметри $n-ро дар функсия нависед ва ҳатман дар бадани функсия @return-ро муқаррар кунед:

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

Натиҷаи компилятсия:

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

Инчунин ба функсия метавон аргументи номдор фиристод. Шартҳои мисоли гузаштаро аз нависем:

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

Ва дар файли styles.css мо ҳамон рамзеро хоҳем дид:

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