CODEWITHSUNDEEP
csssasscompass-sass
user1082754
user1082754

Reputation:

SASS function/mixins for property value

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?

Upvotes: 3

Views: 4525

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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)

Upvotes: 8

Related Questions