Menu icon Foundation
Using & extending Sass components correctly

Hi experts

There's something I don't understand:

I want to add some additional styles to the foundation-button() mixin in order to have those style on every button on my Foundation 6 site (e.g. border-bottom: 3px solid $button-background-hover).

In order to get this I open the _button.scss in /bower_components/foundation-sites/scss/components/ and add my styles to the foundation-button() mixin. But nothing happens.

After that I tried to find the foundation-button() mixin that's included in /src/assets/scss/app.scss. But the only foundation-button() mixin I was able to find is situated in /bower_components/foundation-sites/scss/components/_button.scss. This is the file I changed minutes ago! :-/

Adding additional styles to all buttons on Foundation 6 works only if I copy the _button.scss file from /bower_components/foundation-sites/scss/components/ to /src/assets/scss/ and import it to the app.scss in the same folder.

What's the correct procedure to change or extend the foundation-button() mixin?

Greetings

Ralph

foundation 6extend Mixinschange Mixins

Hi experts

There's something I don't understand:

I want to add some additional styles to the foundation-button() mixin in order to have those style on every button on my Foundation 6 site (e.g. border-bottom: 3px solid $button-background-hover).

In order to get this I open the _button.scss in /bower_components/foundation-sites/scss/components/ and add my styles to the foundation-button() mixin. But nothing happens.

After that I tried to find the foundation-button() mixin that's included in /src/assets/scss/app.scss. But the only foundation-button() mixin I was able to find is situated in /bower_components/foundation-sites/scss/components/_button.scss. This is the file I changed minutes ago! :-/

Adding additional styles to all buttons on Foundation 6 works only if I copy the _button.scss file from /bower_components/foundation-sites/scss/components/ to /src/assets/scss/ and import it to the app.scss in the same folder.

What's the correct procedure to change or extend the foundation-button() mixin?

Greetings

Ralph

This post has been closed. No new replies can be added.

Brock over 3 years ago

Hi Ralph, I've done this myself by writing a class within my standard stylesheet and mixing that into other button variations. Personally, I don't go hacking about in core files, because if you ever do an update, those files will be overwritten. Hope that helps.

Ralph Bolliger over 3 years ago

Hi Brock

Ahm, yeah. I just created a class called .button in my _custom.scss:
CSS
.button {
border-bottom: 3px solid $button-background-hover !important;
}

Basically it works. And I definitely don't want to hack into core files as well. But is this the correct procedure as well?

Greetings

Ralph

Rafi Benkual over 3 years ago

Yeah - that looks right but shouldn't need the !important. Depends where you added the _custom.scss partial - should be last.