SASS causing conflicts with CSS breakpoints selector overrides

Question

SASS causing conflicts with CSS breakpoints selector overrides

I am working with a partial file named _display.scss.

It includes various @mixin and styling classes related to the 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 have also created a @mixin called generate-responsive-content, which takes the @content of a class and generates different @media queries for each breakpoint.

For example:

.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;
    }

  }
}

For instance, classes like: .d-block, .d-block-xs, .d-block-sm...

However, I encountered an issue where I cannot override the classes of .d-none with the classes of .d-block for each breakpoint because they are generated earlier and get overwritten by those of .d-none.

In addition, there are classes with the same name but without breakpoint variants, such as d-none-lg, d-block-lg, which take precedence over others.

You can view a demonstration on this CodePen. Here, d-none variants overwrite every class of d-block.

How can I resolve this conflict?

css sass scss-mixins

Answer 1

Answer №1

Check out this demonstration I made for you: https://codepen.io/rhythm19/pen/OJVMyLa. It's functioning as anticipated. My suggestion is to rearrange the process. Start by creating the d-none classes first, followed by the d-block classes.

.d-none{
    @include generate-responsive-content() {
        @include d-none();
     }
}

.d-block{
    @include generate-responsive-content() {
        @include d-block();
    }
}

Answer 2

Check out this demonstration I made for you: https://codepen.io/rhythm19/pen/OJVMyLa. It's functioning as anticipated. My suggestion is to rearrange the process. Start by creating the d-none classes first, followed by the d-block classes.

.d-none{
    @include generate-responsive-content() {
        @include d-none();
     }
}

.d-block{
    @include generate-responsive-content() {
        @include d-block();
    }
}

Answer 3

Answer №2

Revised answer now includes the 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: View the updated code on Codepen: https://codepen.io/chrislafrombois/pen/JjdGKGJ

Here is the code snippet from the pen for reference:

.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>

Based on our discussion, it's advisable not to add the default d-none and d-block into this mixin. This approach ensures better separation of concerns, with defaults placed before the media query blocks.

Answer 4

Revised answer now includes the 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: View the updated code on Codepen: https://codepen.io/chrislafrombois/pen/JjdGKGJ

Here is the code snippet from the pen for reference:

.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>

Based on our discussion, it's advisable not to add the default d-none and d-block into this mixin. This approach ensures better separation of concerns, with defaults placed before the media query blocks.

SASS causing conflicts with CSS breakpoints selector overrides

Answer №1

Answer №2

Similar questions

Dropdown menu featuring a customizable input field

Is there a challenge in setting up a tag search bar similar to Stack Overflow's?

Attempting to align the text perfectly while also adding a subtle drop shadow effect

What is the best way to find out the size of a Google font file?

The show more/show less link for a long jQuery paragraph is malfunctioning

In Vue, when you want to display text after reaching a height of 50px, any additional text will automatically be replaced by five full

Guide on organizing items into rows with 3 columns through iteration

Suitable HTML container for ASP form over HTML table

Clicking on text within a DIV using jQuery

What could be the reason for the presence of a white border in the footer section?

The CSS specificity of a nested HTML element with no explicitly defined styles

Ways to arrange buttons vertically so they are perfectly aligned beneath one another

Combining input elements and captchas in one line within Bootstrap

Can you please elaborate on how the CSS properties: -webkit-border-radius and border-radius are utilized?

What is the best way to adjust a fixed-width table to completely fill the width of a smartphone browser?

The contents table remains fixed in the top right corner as you scroll

Tips for receiving notifications when the Collapsible collapses

The operation malfunctions if the variable input is below 50, causing it to produce inaccurate results

Loading images with CSS media queries is an essential technique for optimizing

CSS: Achieving Layered Effect with Child Image Over Parent Background Image