including a media query within a mixin

Question

including a media query within a mixin

After accumulating multiple CSS files, I've noticed many instances of:

@media all and (max-width: 400px), (orientation: portrait) {
    ....//Different styles relevant to each component in the respective file
}

Working with Stylus has been my method.
One day, my boss instructed me to modify that media query to:

@media all and (max-width: 400px), (max-height: 400px) {
    ....
}

Now, I have the task of scouring through all my files and implementing this new media query.

I'm wondering if there's a way to incorporate this media query into a mixin or another solution?

css media-queries stylus

Answer 1

Answer №1

Referencing a question that was previously answered, I have a helpful workaround:

Within the variables.styl file

smartphoneWidth = 748px
tabletWidth     = 1012px

mqSmartphone = "only screen and (max-width: " + smartphoneWidth + ")"
mqTablet     = "only screen and (max-width: " + tabletWidth     + ")"

Then, in other stylus files, you can utilize:

@media mqSmartphone
    // Implement styles here

@media mqTablet
    // Implement styles here

Though not flawless, this approach may be considered more refined than using unquote()

Answer 2

Referencing a question that was previously answered, I have a helpful workaround:

Within the variables.styl file

smartphoneWidth = 748px
tabletWidth     = 1012px

mqSmartphone = "only screen and (max-width: " + smartphoneWidth + ")"
mqTablet     = "only screen and (max-width: " + tabletWidth     + ")"

Then, in other stylus files, you can utilize:

@media mqSmartphone
    // Implement styles here

@media mqTablet
    // Implement styles here

Though not flawless, this approach may be considered more refined than using unquote()

Answer 3

Answer №2

When working with a stylus, it is possible to create unique block mixins for defining certain styles. One example that could be utilized is:

widerthan(var)
  condition = 'screen and (min-width: %s)' % var
  @media condition
    {block}

narrowerthan(var)
  condition = 'screen and (max-width: %s)' % var
  @media condition
    {block}

mobile = 748px

This can then be implemented in your code like so:

button
  +narrowerthan(mobile)
    flex-direction column

Answer 4

When working with a stylus, it is possible to create unique block mixins for defining certain styles. One example that could be utilized is:

widerthan(var)
  condition = 'screen and (min-width: %s)' % var
  @media condition
    {block}

narrowerthan(var)
  condition = 'screen and (max-width: %s)' % var
  @media condition
    {block}

mobile = 748px

This can then be implemented in your code like so:

button
  +narrowerthan(mobile)
    flex-direction column

Answer 5

Answer №3

To work around Stylus's lack of support for interpolation or variables in media queries (or block arguments for mixins), you can use the following hack:

$my_query = "@media all and (max-width: 400px), (orientation: portrait) {"

unquote($my_query)
…
unquote("}")

Then, whenever you need to modify the query, simply update the $mu_query variable.

The only downside, aside from the less-than-ideal syntax, is that this method won't function properly with nested media queries.

Answer 6

To work around Stylus's lack of support for interpolation or variables in media queries (or block arguments for mixins), you can use the following hack:

$my_query = "@media all and (max-width: 400px), (orientation: portrait) {"

unquote($my_query)
…
unquote("}")

Then, whenever you need to modify the query, simply update the $mu_query variable.

The only downside, aside from the less-than-ideal syntax, is that this method won't function properly with nested media queries.

including a media query within a mixin

Answer №1

Answer №2

Answer №3

Similar questions

Ensuring Consistent Height for a Responsive HTML Document Across Devices

Ways to dynamically modify the CSS attributes of a webpage during the page load event

Images that have been resized on Android appear blurry when viewed on the second page

Problem with CSS layout on Internet Explorer 9

Struggling to make background image behave as desired in CSS

What is the reason behind the necessity of having content inside div tags in order for the style to take effect

Changing between two images using HTML and CSS

What is the method to combine multiple style values in vue.js?

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

How can I integrate a timer into an Angular carousel feature?

Adjusting Navigation bar size according to the size of the screen

Choosing an option will display a specific div while hiding another using JQuery

Hidden footer error has been resolved despite background visibility

Tips for positioning an inner div within an outer div

Is it possible to modify the style using jQuery?

Which specific element of CSS should be adjusted to ensure compatibility with Internet Explorer?

Tips for deleting text on a webpage either prior to or following a certain character

Commence the element on a fresh line

The CSS3 Animation must come to a halt once it reaches the 75% mark

Create CSS styles that are responsive to different screen sizes and