0

EDIT:

I was just overthinking it. Now I've added more variables to the mixin like this to make all the colour correct: 

@mixin CustomBtn($border-color, $transparent: transparent, $text-color, $bg-hover-color, $text-hover-color)

I've got a WordPress page where I use SCSS mixins to simplify the use of different colours on buttons. Most of the buttons have the same border colour and a text colour with a transparent background on them all so I created this mixin to deal with that:

@mixin CustomBtn($primary-color, $text-hover-color, $transparent: transparent) {
 border: 2px solid $primary-color;
 border-radius: 2px;
 background-color: $transparent;
 background-image: none;
 color: $pri-color;
 font-weight: 600;
 padding: 1rem 2rem 1rem 1.5rem;

 &:hover {
   background-color: $primary-color;
   color: $text-hover-color;
 }
}

And here is the css where I output it: 

.btn_custom {

 &-black a {
  @include CustomBtn($black, $white);
 }

 &-white a {
  @include CustomBtn($white, $black);
 }

 &-blue a {
  @include CustomBtn($light-blue, $white, $light-blue);
 }

 &-negative a {
  @include CustomBtn($brown, $white);
 }
}

This is all great but now the client wants to have a button that uses a coloured background, ex. a button with blue background-colour and white text. I want to do this mixin in the best way possible and not repeat my code, but I can't seem to figure out how to make this mixin work with a coloured background in the way I want it to (maybe I'm doing it wrong tho...)

Should I maybe use a conditional statement for the $transparent variable?

Krullmizter
  • 529
  • 8
  • 28
  • 3
    what exactly seems to be the problem ? beside the wrong variable names ( `$pri-color` ) in the mixin ? what is the expected outcome you want in css ? – Dirk Dec 05 '18 at 12:38
  • Ahh, I overthink it sorry. What I meant with the post is that all buttons except one should have a transparent background, I didn't want to add any more variables but that is just to overthink it, so now I've added more variables to my mixin like: `@mixin CustomBtn($border-color, $transparent: transparent, $text-color, $bg-hover-color, $text-hover-color)` – Krullmizter Dec 05 '18 at 12:56
  • But is it anyway possilbe to do this: `@mixin CustomBtn($border-color, $bg-hover-color: $border-color`? So can I in any way use a variable as a default variable? – Krullmizter Dec 05 '18 at 12:59
  • yes it is possible to do it that way – Dirk Dec 05 '18 at 13:11
  • Hmm okay gona try to figure it out because atom editor shows an error on compile – Krullmizter Dec 05 '18 at 13:15

0 Answers0