Recently I found interesting issue with Zurb Foundation SASS setup.
There is one interesting unusualness with such quite interesting task – component project structure and organization of assets and code file for it.
The main idea of having such structure is a possibility to have weakly coupled, well tested independent components. In perfect case we would have styles as a part of the component as well.
For that purpose, I used SCSS/SASS with Zurb Foundation.
So, let’s take a closer look at the structure of the module:
Seems to be very clear and straightforward to implement, but here I got some gotchas on the road.
If we would turn style.scss into CSS file and attach it somewhere, we could notice that it works.
Occasionally it would be wise solution to use some SASS/SCSS framework Zurb Foundation in the project, since it offers a lot of useful features like grids, typography, buttons, bars, etc.
To use it we would need to add some stuff to SASS/SCSS files, like mixins, grids, components, functions, global variables, etc. Then style.scss might look like this:
Seems to be good, but now you would notice that Zurb Foundation after compilation to CSS you will get all the default styles added to each component. Looks like a lot of redundant code.
But this problem can be easily solved: there are magic flags in Foundation config.
Just look for
$include-html-global-classes. You can find them in
_settings.scss in the default Foundation SASS or SCSS bundle.
So here is quick manual to manipulate on them:
$include-html-classes if enabled let’s to be generated all the default css classes from foundation including global classes, by default
$include-html-global-classes if enabled lets’ to be generated only to global classes that are actually essentially needed to be added to make foundation work properly.
Thus, solution is quite simple, we need to override there variables:
That’s it, now CSS styles for components will be rendered as expected.