I am currently in the process of creating a series of web pages that will be accessed from various websites, each with its unique content template. Even though these pages are very similar, they require different media query breakpoints based on the specific site they are served from.
It would be ideal to allow each site to customize the page by adding their site name as a class to the body container, ensuring that the appropriate breakpoints are applied for that particular site.
I have experimented with several methods using mixins and more, but so far, I have not been successful in achieving the desired outcome.
Currently, I have defined my breakpoints mixin in the abstracts/_mixins.scss file:
@mixin breakpoint ($breakpoint) {
@if $breakpoint ==small {
@media screen and (min-height: $xsmall) and (min-width: $xsmall-width) {
@content
}
}
@if $breakpoint ==medium {
@media screen and (min-height: $small) and (min-width: $small-width) {
@content
}
}
...
I apply these breakpoints using @include breakpoints(small){}
If there is a more efficient way to achieve this without relying on setting the parent container class, I am open to exploring alternatives. My goal is to avoid having separate stylesheets for each site to ensure easier maintenance.