Question

Here’s an example mixin:

=border($alpha: 0.2)
    1px solid hsla(0, 0, 0, $alpha)

I want to use functions/mixins to achieve something like this:

border-right: +border(0.2)

This will compile into:

border-right: 1px solid hsla(0, 0, 0, 0.2)

I have not seen any documentation on how to use functions/mixins to dynamically calculate property values. I have only seen them used when they include the property as well. How could this be achieved?

Answer 1

You can write functions like this:

@function border($alpha: 0.2)
  $border: 1px solid hsla(0, 0, 0, $alpha)
  @return $border

and apply them like any other sass/compass function:

border-right: border(0.2)