CODEWITHSUNDEEP
csssassscss-mixins
Cem Firat
Cem Firat

Reputation: 410

scss custom mixin overwrites change value does not replace, but adds it

I want to overwrite the border-radius value 0 to 4px.

Does not replace, but adds it. What am I doing wrong?

@import: theme.scss:

.uk-button {
    border-radius: 0;
    @if(mixin-exists(hook-button)) { @include hook-button(); }
}

custom.scss:

// Custom mixin overwrites
// that's correct?
@mixin hook-button() {
    border-radius: 4px;
}

Unexpected result:

.uk-button {
    border-radius: 0; 
    border-radius: 4px;
}

Expected result:

.uk-button {
    border-radius: 4px;
}

Upvotes: 0

Views: 285

Answers (1)

Benjamin Zvolenszki
Benjamin Zvolenszki

Reputation: 45

@include, as it says, only adds/includes the particular rule(s), but does not replace them.

Theme SCSS should look like this:

.uk-button {
    @if(mixin-exists(hook-button)) { @include hook-button(); }
    @else { border-radius: 0; }
}

Upvotes: 1

Related Questions