Closed tallys closed 9 years ago
@Tallys To start, it's good that you found a way to fix the issue, but unfortunately it’s not the right fix. However, the issue you're fixing is actually a symptom of a few bigger problems; (1) your layout file is extending from a class that is more specific than it is (.pet-icon
from the main page; I honestly don’t even understand how this is compiling), and (2) there's no namespacing in your page styles.
Your page styles should really only be able to apply to elements on that page. In other words, the classes in your page stylesheets should be nested under a class that uniquely identifies that page. In "vanilla" css, it would look something like this:
body.main-page .pet-icon {…}
body.results-page .subscription-form {…}
Without that specificity, you are defining global styles in a place where we would expect styles local only to a certain page.
.pet-icon
class and put it into global - that way you can include it in both classes without having hierarchical issues. This will make the changes you created in the PR unnecessary.Let's clean up the _main.scss file in general with a placeholder selector (turn .pet-icon
into %pet-icon
) and a mixin. Each of the animal icons include the mixin - I’d like the final product to look like this:
%pet-icon { … }
@mixin pet-icon { … }
.dog-icon { @include pet-icon(‘dog’); }
.cat-icon { @include pet-icon(‘cat’); }
.other-icon { @include pet-icon(‘other’); }
To handle the variable image names nicely, you will need to know about variable interpolation.
fixed issue 54