Problem with CSS breakpoints selectors override with SASS - css

Question

I have a _display.scss partial.
It contains #mixin and classes related to display CSS property.
_display.scss
#mixin d-block{
display: block;
}
#mixin d-none{
display: none;
}
.d-block{
#include d-block();
}
.d-none{
#include d-none();
}
I developer a #mixin generate-responsive-content that take the #content of a class and generate a different #media query for each breakpoint.
In this way:
.d-block{
#include generate-responsive-content() {
#include d-block();
}
}
.d-none{
#include generate-responsive-content() {
#include d-none();
}
}
// Generate all breakpoints from content
#mixin generate-responsive-content() {
// Responsive styles
// Loop over each size
#each $breakName, $width in $breakpoints {
// Check breakpoint
#if ($breakName != "") {
$breakName: '-' + $breakName;
#media (min-width: $width) {
&#{$breakName} {
#content
}
}
} #else {
#content;
}
}
}
eg. generated classes: .d-block, .d-block-xs, .d-block-sm...
But in this way, I cannot override the classes of .d-none with the classes of .d-block for each breakpoint because they have been generated before and are overwritten by those of .d-none.
I also have a class with the same name but without breakpoint variant, like d-none-lg, d-block-lg, these overwrite all others.
Check this CodePen. Here d-none variants overwrite every class of d-block.
How I can solve that?

Answer 1

I have created a quick demo for you - https://codepen.io/rhythm19/pen/OJVMyLa and its working as expected. I think you just need to swap the order. Generate d-none classes first and then d-block classes.
.d-none{
#include generate-responsive-content() {
#include d-none();
}
}
.d-block{
#include generate-responsive-content() {
#include d-block();
}
}

Answer 2

Updated answer to include max-width breakpoint.
.see{outline:1px solid black;padding:1em;}
// BREAKPOINT
$breakpoints: (
"xs": 575px,
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px
);
#mixin d-block() {
display: block;
}
#mixin d-none() {
display: none;
}
.d-block{
#include d-block();
}
.d-none{
#include d-none();
}
// Generate all breakpoints from content
#mixin generate-responsive-content() {
// Responsive styles
// Loop over each size
#each $breakName, $width in $breakpoints {
// Check breakpoint
#if ($breakName == 'xs' ) {
$breakName: '-' + $breakName;
#media (max-width: $width) {
&#{$breakName} {
#content
}
}
}
#else if ($breakName != 'xs' ) {
$breakName: '-' + $breakName;
#media (min-width: $width) {
&#{$breakName} {
#content
}
}
} #else {
#content;
}
}
}
.d-block{
#include generate-responsive-content() {
#include d-block();
}
}
.d-none{
#include generate-responsive-content() {
#include d-none();
}
}
This is what is output:
.see {
outline: 1px solid black;
padding: 1em;
}
.d-block {
display: block;
}
.d-none {
display: none;
}
#media (max-width: 575px) {
.d-block-xs {
display: block;
}
}
#media (min-width: 576px) {
.d-block-sm {
display: block;
}
}
#media (min-width: 768px) {
.d-block-md {
display: block;
}
}
#media (min-width: 992px) {
.d-block-lg {
display: block;
}
}
#media (min-width: 1200px) {
.d-block-xl {
display: block;
}
}
#media (max-width: 575px) {
.d-none-xs {
display: none;
}
}
#media (min-width: 576px) {
.d-none-sm {
display: none;
}
}
#media (min-width: 768px) {
.d-none-md {
display: none;
}
}
#media (min-width: 992px) {
.d-none-lg {
display: none;
}
}
#media (min-width: 1200px) {
.d-none-xl {
display: none;
}
}
UPDATED CODEPEN: Here's the OPs codepen, with this update:
https://codepen.io/chrislafrombois/pen/JjdGKGJ
Here is the code from the pen:
.see {
outline: 1px solid black;
padding: 1em;
}
.d-block {
display: block;
}
.d-none {
display: none;
}
#media (max-width: 575px) {
.d-block-xs {
display: block;
}
}
#media (min-width: 576px) {
.d-block-sm {
display: block;
}
}
#media (min-width: 768px) {
.d-block-md {
display: block;
}
}
#media (min-width: 992px) {
.d-block-lg {
display: block;
}
}
#media (min-width: 1200px) {
.d-block-xl {
display: block;
}
}
#media (max-width: 575px) {
.d-none-xs {
display: none;
}
}
#media (min-width: 576px) {
.d-none-sm {
display: none;
}
}
#media (min-width: 768px) {
.d-none-md {
display: none;
}
}
#media (min-width: 992px) {
.d-none-lg {
display: none;
}
}
#media (min-width: 1200px) {
.d-none-xl {
display: none;
}
}
<div class="see">
<span>I CANNOT SEE ANYTHING BECAUSE d-none OVERWRITE EVERYTHING</span>
<div class="d-none d-none-xs d-block-sm d-block-md d-block-lg">
CHECK CSS STYLE D-BLOCK-LG OVERWRITE EVERITHING
</div>
</div>
Per our discussion, you should not try and put the default d-none and d-block into this mixin. Because of how the code will output, you should just separate that concern and place the defaults before the media query blocks.