While utilizing the Foundation 4 framework, I've encountered an issue where the margins are being overridden by the framework's default settings. This situation forces me to use the !important keyword to apply margins to specific elements.
Below is an excerpt from my _grid.scss file, which establishes the grid layout for mobile browsers.
%row {
@include grid-row;
}
%columns-1 {
@include grid-column(1);
}
%columns-2 {
@include grid-column(2);
}
%columns-3 {
@include grid-column(3);
}
%columns-4 {
@include grid-column(4);
}
%columns-5 {
@include grid-column(5);
}
%columns-6 {
@include grid-column(6);
}
...
The issue arises in the base.scss file with this section:
.entry {
margin-bottom: 10px;
.entry-blurb {
.entry-description {
display: none;
}
}
}
I suspect the problem lies in my approach of using placeholders in SASS for the grid system, rather than mixins as traditionally used. Normally, a mixin would directly include the necessary code within each element's CSS, effectively overriding any conflicting margins.