Функцыі ў 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);
}