Menu icon Foundation
Best practice for overriding styles that are not variables

This is more of a general approach question than a specific issue.

I'm wondering what the best approach is for overriding styles or even whole functions that aren't already defined as variables in sass.

For instance, Foundations _forms does some row un-nesting for form .row row - but because .NET insists on wrapping the entire page in a form, I need to override that.

It's not possible to redefine a base foundation mixin copied into one of my local partials (presumably because the mixin has already been called at this point by @include exports)

Is this possible, or is there a better way to do it?

settingsoverrideforms.net

This is more of a general approach question than a specific issue.

I'm wondering what the best approach is for overriding styles or even whole functions that aren't already defined as variables in sass.

For instance, Foundations _forms does some row un-nesting for form .row row - but because .NET insists on wrapping the entire page in a form, I need to override that.

It's not possible to redefine a base foundation mixin copied into one of my local partials (presumably because the mixin has already been called at this point by @include exports)

Is this possible, or is there a better way to do it?

Jeremy Englert over 5 years ago

Traditionally, I just over-ride the style using my own CSS, but I am also very interested in seeing how others achieve this.

Toby Stokes over 5 years ago

Yes, in many cases, it's just a question of adding extra styles, but because Foundation uses some pretty specific selectors (.top-bar-section li a:not(.button) I'm talking to you) - you need to replicate that cascade, because plain old .mystyles{} will get overridden.

it doesn't feel right to be duplicating those type of selectors out of Foundation and into extra styles.