Ways to expand media queries using sass

Question

Ways to expand media queries using sass

I have been using media queries to modify my code.

@media (min-width: 576px)
.modal-dialog {
max-width: 500px;
margin: 14% auto;    
}

I want to change the media query, but after searching online, I couldn't find a suitable solution. I know the following code is incorrect:

 @media (min-width: 576px)
.modal-dialog
{
@extend @media (min-width: 576px)
.modal-dialog{
max-width: 800px
}
}

I am not familiar with this approach, can anyone explain it to me?

Any assistance would be greatly appreciated.

Here is the updated code:

 @mixin modal-dialog-mixin() {
max-width: 800px;  
 }

 @media ( min-width : 576px ){
@extend .modal-dialog;    //error here
@include modal-dialog-mixin();
 }

Unfortunately, it doesn't work and shows an error at @extend .modal-dialog;

css sass bootstrap-4 media-queries bootstrap-modal

Answer 1

Answer №1

If we want to find the solution, we need to consider using a special @mixin feature. By implementing a @mixin, we can effortlessly bring in all the necessary rules. To achieve this, we simply need to place the code from the class we intend to extend within the @mixin instead of the class itself. This way, both the class and the section within the media query can utilize the @mixin's functionality.

@mixin modal-dialog-mixin() {
   max-width: 500px;
   margin: 14% auto;   
   }


 @media (max-width: 576px) {
   button {
     @include modal-dialog-mixin();
   }
 }

To delve deeper into this topic, you may refer to the following link for additional information.

Answer 2

If we want to find the solution, we need to consider using a special @mixin feature. By implementing a @mixin, we can effortlessly bring in all the necessary rules. To achieve this, we simply need to place the code from the class we intend to extend within the @mixin instead of the class itself. This way, both the class and the section within the media query can utilize the @mixin's functionality.

@mixin modal-dialog-mixin() {
   max-width: 500px;
   margin: 14% auto;   
   }


 @media (max-width: 576px) {
   button {
     @include modal-dialog-mixin();
   }
 }

To delve deeper into this topic, you may refer to the following link for additional information.

Ways to expand media queries using sass

Answer №1

Similar questions

`Looking for a solution: Bootstrap failing to align right properly`

Using float instead of CSS inline-block is more effective for styling a PHP element

Footer that sticks to the bottom of the page across various pages

Ways to make an image wander aimlessly across a webpage while also spinning as it moves (with the help of jQuery or CSS)

Adjust the button's width as the text changes to create a dynamic animation

Why is it important to incorporate the CSS property background-repeat: repeat; into our code?

Showcasing top performers via JavaScript tabs

Issues persisting with the fixed header functionality in Bootstrap table

the live binding feature fails to function properly once an append operation is executed

Creating a full-width menu with Material UI - a step-by-step guide

Placing horizontal text over a Bootstrap 5 grid

Libraries that provide webkit support for all browsers

Utilize MaterialUI Grid to define custom styles for the ::after pseudo-element

Javascript Calculator with Dual Input Fields

Shifting Transition for Customer Reviews

Display an "add to cart" button and a discount image when hovering over

Creating a dynamic image carousel using jQuery

Tips for Omitting Children <li> from CSS Design

When the child of li is clicked instead

Stopping the sound when its' Div is hovered over