Tips for merging identical media queries into a single query using SASS

Question

Tips for merging identical media queries into a single query using SASS

Previously, I organized my media queries in LESS by combining them at a single place like this

LESS:

.media-mixin(@break) when (@break = 1200px) {
  .abc{
       color: red;
  }
}
.media-mixin(@break) when (@break = 1200px) {
  .xyz{
       color: yellow;
  }
}

@media all and (max-width: 1200px) {
  .media-mixin(1200px);
}

CSS result

@media all and (max-width: 1200px) {
  .abc{
     color: red;
  }
  .xyz{
       color: yellow;
  }
}

I am currently looking for the best method to achieve the same functionality in SASS as I have not found a straightforward approach yet.

html css sass less scss-mixins

Answer 1

Answer №1

Finding a straightforward solution in Sass might be challenging.

If you approach it from a different angle, you can create a mixin with the media query embedded:

@mixin media-mixin($selector, $rule, $value) {
    @media all and (max-width: 1200px) {
        #{$selector} {
            #{$rule}: $value;
        }
    }
}

@include media-mixin(p, color, red);

You can enhance this approach to handle multiple properties and values:

@mixin media-mixin($selector, $rules...) {
    @media all and (max-width: 1200px) {
        #{$selector} {
            @each $rule in $rules {
                #{nth($rule, 1)}: nth($rule, 2);
            }
        }
    }
}

@include media-mixin(p, (color, red), (background-color, blue));

/* If dealing with more complex selectors, use quotes */
@include media-mixin(".container > p", (color, red), (background-color, blue));

Answer 2

Finding a straightforward solution in Sass might be challenging.

If you approach it from a different angle, you can create a mixin with the media query embedded:

@mixin media-mixin($selector, $rule, $value) {
    @media all and (max-width: 1200px) {
        #{$selector} {
            #{$rule}: $value;
        }
    }
}

@include media-mixin(p, color, red);

You can enhance this approach to handle multiple properties and values:

@mixin media-mixin($selector, $rules...) {
    @media all and (max-width: 1200px) {
        #{$selector} {
            @each $rule in $rules {
                #{nth($rule, 1)}: nth($rule, 2);
            }
        }
    }
}

@include media-mixin(p, (color, red), (background-color, blue));

/* If dealing with more complex selectors, use quotes */
@include media-mixin(".container > p", (color, red), (background-color, blue));

Tips for merging identical media queries into a single query using SASS

Answer №1

Similar questions

Choose either nth-child or nth-of-type within a nested element

How to align items to the left and center within a div?

Guide on making a prev/next | first/last button functional in list.js pagination

Creating a webpage that dynamically loads both content and video using HTML and Javascript

Require an additional button to dynamically load more content and shift all existing elements further down the page

Personalize the color of tags in streamlit

Attempting to retrieve the current time using JavaSscript

Avoid floating right elements all the way up if there are already elements floating left

What is the best way to ensure that all elements inside a Grid item extend to the bottom, except for the text?

Modifying a string in PHP before inserting it into a database

Attempting to implement scroll-based animation on my webpage

The Bootstrap navbar stubbornly refuses to hide after being clicked on

Guidelines for automating button click using selenium in Python

AngularJS - Organize Item Hierarchy with Separate Containers for Each Group

Implementation of multiple angular guards causing a crash on the page

Safari is not properly handling element IDs when used in conjunction with React

Python is the way to go for clicking on a link

What is the best way to position the div element to the right side of the webpage?

Customize the appearance of the bootstrap nav-bar by assigning unique background colors to each dropdown menu

Is there a way to make a div element clickable?