[SCSS] Write Custom Functions with the SCSS @function Directive

Writing SCSS @functions is similar to writing functions in other programming languages; they can accept arguments and have return statements. SCSS provides a ton of great features, but sometimes we need to roll our own function. We can do that too! They’re useful when the desired functionality isn’t available from the built in SCSS functions and a mixin just won’t do. In this lesson, we learn how and when to use SCSS function directives.

 

@function font-scale($exponent, $base-font-size: 14px, $ratio: 1.2) {
  $value: 1;

  @for $i from 1 through $exponent {
    $value: $value * $ratio;
    @debug $value;
  }

  @return if($exponent > 0, $base-font-size * $value, $base-font-size);
}

.stuff { font-size: font-scale(4); }
.things { font-size: font-scale(2); }

@for $i from 1 through 6 {
  $exponent: 7 - $i;

  h#{$i} { font-size: font-scale($exponent, $ratio: 1.5); }
}

Notice, we using '@debug' directive, it can help to print out the value in console

 

We get:

.stuff {
  font-size: 29.0304px; }

.things {
  font-size: 20.16px; }

h1 {
  font-size: 159.46875px; }

h2 {
  font-size: 106.3125px; }

h3 {
  font-size: 70.875px; }

h4 {
  font-size: 47.25px; }

h5 {
  font-size: 31.5px; }

h6 {
  font-size: 21px; }