Funktioner i SASS

I den här lektionen kommer vi att undersöka hur man använder funktioner. Funktioner är på något sätt lika mixins, men tillåter att parametrar läggs till, som kan ändra sina värden.

Låt oss skapa en funktion func som kommer att ställa in teckenstorleken. Låt storleken skickas som en parameter och låt parametern vara en variabel:

styles.scss$font-size: 10px;

Sedan anger vi parametern i funktionen $n och måste inkludera @return i funktionskroppen:

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

Resultat av kompilering:

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

Man kan också skicka ett namngivet argument till funktionen. Låt oss skriva om villkoren från föregående exempel:

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

Och i filen styles.css kommer vi att se samma kod:

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