SASS Essentials 2018: Functions

SASS Functions are Similar to Mixins. They tend, however, to be used more programmatically, with logic and return values.

Here’s an example. This function will make an element’s text color white if the background is dark, and black if the background is white.

$color_sample: #8ac2af;

@function set-contrasting-text-color($color_input) {
  @if(lightness($color_input) > 50) {
    @return #000000;
  } @else {
    @return #ffffff;
  }
}

.dialog-box {
  background-color: $color_sample;
  color: set-contrasting-text-color($color_sample);
}

To see how this works, put this function in a test file outputting css that you will use in a page. Put a DIV with a class of .dialog-box in the page.

Compile the SASS, then change the value of the $color_sample variable to light and then dark colors. Compile between changes.

I will add more to this discussion later when I have time.