search

Pearson-Higher-Ed / elements

DEPRECATED - Atomic building blocks for styling Pearson products
https://www.npmjs.com/package/pearson-elements
MIT License
7 stars 10 forks source link

Unable to @extend typography styles within media queries #199

Closed parkerpearson closed 7 years ago

parkerpearson commented 7 years ago

I've brought this up before, but am running into it again with the design update for the site. My use case is for a piece of content to transition between a couple different typography styles depending on the breakpoint. For example, I have an h1 that starts out as a .pe-title, and then should become a .pe-page-title at a larger breakpoint.

Right now these are defined by their classes, which I can include by using the @extend feature of sass. However, this does not work within a media query (including the pe-responsive-breakpoint mixin).

Previously type styles were defined as mixins which could be easily including inside of a media query. It seems like this practice of varying the style based on the breakpoint would be fairly common and something the Elements SDK should make easy by default. Even if we don't move to mixins we should at least document a preferred method of applying/overriding styles on a per-breakpoint basis.

mhomolak commented 7 years ago

Closing as this is a known error. The below article explains a workaround.

https://lazamar.github.io/exdending-classes-within-media-queries-in-scss/

parkerpearson commented 7 years ago

Haven't really been running into this issue lately, but FYI that article doesn't really describe a workaround, in fact it suggests refactoring back into using mixins for this which was the original request of this issue.