Sass Function Example for Changing an Element's Opacity

Feature thumb snip20170729 1

One of the powerful benefits to using Sass is that it allows you to create functions similar to a traditional programming and then call the functions from anywhere in the Sass style files.

For example, let's imagine that you want to call a specific color from multiple places, but you need to change the opacity of the color for different page elements. You can create a function like this:

@function devcamp-green($opacity) {
  @return rgba(#00cb79, $opacity)
}

 

And then you can call the function inside an element while passing in the opacity value needed, like this:

.title {
  margin: 0px;
  background: devcamp-green(1);
}

 

This will result in the following color rendering on the screen:

Now let's compare what happens when we change the argument value from 1 to 0.5 from within the wrapper (yes, it's ugly, the point is to be able to see the color difference!). So the function call would now look like this:

background: devcamp-green(0.5);

 

And that will output the following styles on the page:

And that's a basic example of using functions in Sass.