SASS Mixin and Hover: How to write the Hover by changing mixin parameters?

Asked

Viewed 71 times

0

Hi. I’m new to SASS, so I’m sorry if it’s a silly question, but I couldn’t find anywhere on the Internet with an answer for her, so...

I’m working on a project that has a button template. I created a mixin to define how it will be.

@mixin btn($bg:#fff, $color:$blue, $border:none) {
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1em;
    text-align: center;
    padding: 15px 35px 16px;
    margin: 10px auto;
    border: $border;
    border-radius: 50% 0;
    background: $bg;
    color: $color;
    position: relative;
    z-index: 50;
}

When I call the button, I can pass different properties through the parameters to create color variations and etc.

.main-btn {
    @include btn($bg:transparent,$border:2px solid $blue);
}

My question is this: if I want to make a Hover on this button, there is some way I can write it changing only the values of the mixin parameters, not to write all the changes of the Hover in full (type "background-color: $blue", "color: #fff", etc)?

I thought I’d do something like this:

.main-btn {
    @include btn($bg:transparent, $border:2px solid $blue);
    &:hover {
        @include btn($bg:$blue, $color:#fff, $border:none);
    }
}

But when I do it, it actually does the entire mixin include, including rewriting all the static default properties again, and then the file. css gets huge.

Is there any way to do Hover just by changing the values of the parameters passed in a mixin already included in the class?

  • I think what you want to do the right thing is the Placeholder and not Mixin see here https://sass-lang.com/documentation/style-rules/placeholder-selectors

  • Good idea! I used the placeholder only for fixed value attributes, and used mixin the same way I wrote at the end of my post, only only for variable values (background-color, color and border-color). I had never really understood the difference between the placeholder and mixin, but this article here helped me a lot too (https://tableless.com.br/sass-mixin-ou-placeholder/).

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.