Menu icon Foundation
Overriding Mixins in Component .scss Files

Hi there. I am working on a project that requires some fairly robust customization of some of foundations core components. As an example I am trying to override 'bower_components/foundation/scss/foundation/components/_buttons.scss'
with my own custom '_buttons-override.scss'

So far the ONLY way I have been able to get this to work properly is to copy ALL of the components that reference "_buttons.scss" (with @import "buttons";) out of the bower_components directory and into my custom "scss" directory and then altering all those components to reference my new "_buttons-override.scss".

There has GOT to be a better way to override the mixins used in buttons.scss without having to pull 5 other component files out of bower and into my custom code.

Any advice here would be hugely appreciated.

@import
    "settings",
	"foundation/components/accordion",
	"foundation/components/alert-boxes",
	"foundation/components/block-grid",
	"foundation/components/breadcrumbs",
	"button-groups-override",
	"buttons-override",
	"foundation/components/clearing",
	"foundation/components/dropdown",
	"foundation/components/dropdown-buttons",
	"foundation/components/flex-video",
	"forms-override",
	"foundation/components/grid",
	"foundation/components/inline-lists",
	"foundation/components/joyride",
	"foundation/components/keystrokes",
	"foundation/components/labels",
	"foundation/components/magellan",
	"foundation/components/orbit",
	"foundation/components/pagination",
	"foundation/components/panels",
	"foundation/components/pricing-tables",
	"foundation/components/progress-bars",
	"foundation/components/reveal",
	"foundation/components/side-nav",
	"split-buttons-override",
	"foundation/components/sub-nav",
	"foundation/components/switches",
	"foundation/components/tables",
	"foundation/components/tabs",
	"foundation/components/thumbs",
	"foundation/components/tooltips",
	"top-bar-override",
	"foundation/components/type",
	"foundation/components/offcanvas",
	"foundation/components/visibility";

componentsmixinsSass

Hi there. I am working on a project that requires some fairly robust customization of some of foundations core components. As an example I am trying to override 'bower_components/foundation/scss/foundation/components/_buttons.scss'
with my own custom '_buttons-override.scss'

So far the ONLY way I have been able to get this to work properly is to copy ALL of the components that reference "_buttons.scss" (with @import "buttons";) out of the bower_components directory and into my custom "scss" directory and then altering all those components to reference my new "_buttons-override.scss".

There has GOT to be a better way to override the mixins used in buttons.scss without having to pull 5 other component files out of bower and into my custom code.

Any advice here would be hugely appreciated.

@import
    "settings",
	"foundation/components/accordion",
	"foundation/components/alert-boxes",
	"foundation/components/block-grid",
	"foundation/components/breadcrumbs",
	"button-groups-override",
	"buttons-override",
	"foundation/components/clearing",
	"foundation/components/dropdown",
	"foundation/components/dropdown-buttons",
	"foundation/components/flex-video",
	"forms-override",
	"foundation/components/grid",
	"foundation/components/inline-lists",
	"foundation/components/joyride",
	"foundation/components/keystrokes",
	"foundation/components/labels",
	"foundation/components/magellan",
	"foundation/components/orbit",
	"foundation/components/pagination",
	"foundation/components/panels",
	"foundation/components/pricing-tables",
	"foundation/components/progress-bars",
	"foundation/components/reveal",
	"foundation/components/side-nav",
	"split-buttons-override",
	"foundation/components/sub-nav",
	"foundation/components/switches",
	"foundation/components/tables",
	"foundation/components/tabs",
	"foundation/components/thumbs",
	"foundation/components/tooltips",
	"top-bar-override",
	"foundation/components/type",
	"foundation/components/offcanvas",
	"foundation/components/visibility";
Tim over 2 years ago

Did you ever find a way Cam Lee. I have the exact same issue, and I came to the same appraoch as you. There's got to be a better way though!

Geoff Kimball over 4 years ago

There's no way to override what kind of CSS a mixin creates, or its logic. You can override the default values of most of the CSS using the settings variables, or the parameters of the mixin. But you can't override the guts of the mixin; that's not something Sass can really do.

Could you give a more specific example of what you're trying to accomplish?

Cam Lee over 4 years ago

@Rafi

What I am doing is copying the component files that usually live in:
bower_components/foundation/scss/foundation/components/

And moving them into:
scsss/

which is where all my custom .scss files live, then I did exactly what you described above and importing my new custom "_buttons-override.scss"

I really want to avoid altering files unnecessarily and specifically moving them out of the bower_components directory in order to allow easy updating.

Is there some simple way to override a mixin within the default "_buttons.scss" file WITHOUT duplicating the entire component outside of the "bower_components" directory??

Basically I just want to alter one of the mixins within _buttons.scss it strikes me as odd that there isn't a way to do this without making a duplicate of the framework file outside of the framework itself.

Rafi Benkual over 4 years ago

Are you saying that you are importing components that have button as a dependency because you are not including foundation buttons?

If so, you can remove the @import "buttons"; in each of those components and instead import the custom buttons.