Funktsioonid SASS-is

Selles õppetükis vaatleme, kuidas kasutada funktsioone. Funktsioonid on millessegi sarnased segamistega, kuid võimaldavad lisada parameetreid, mis saavad oma väärtusi muuta.

Teeme funktsiooni func, mis seab fondi suuruse. Laske suurust edastatakse parameetrina ja parameetriks olgu muutuja:

styles.scss$font-size: 10px;

Seejärel kirjuta funktsiooni parameeter $n ja määra kindlasti funktsiooni kehas @return:

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

Kompileerimise tulemus:

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

Samuti saab funktsioonile edastada nimetatud argumendi. Kirjutame ümber eelmise näite tingimused:

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

Ja failis styles.css näeme sama koodi:

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