String iteration with Stylus

Is there a way to remove the brackets and the quotation marks when putting media queries into an object and looping over them? The code works well, but the stylus is causing the output to have unwanted characters.

Here's my code:

$maxBreakpoints = {
  "0": 'and (min-width: 1701px) and (max-width: 1920px)',
  "1": 'and (min-width: 1440px) and (max-width: 1700px)',
  "2": 'and (min-width: 1280px) and (max-width: 1439px)',
  "3": 'and (min-width: 1024px) and (max-width: 1023px)'
}

$_resolution = {
  "0": 1920,
  "1": 1440,
  "2": 1280,
  "3": 1024
}

for $i, $resolution in $maxBreakpoints

  @media all $resolution

The current output of this code is:

@media all ('and (min-width: 1440px) and (max-width: 1700px)')

Answer №1

It is essential to include all within the string:

$breakpoints = {
  "0": 'all and (min-width: 1701px) and (max-width: 1920px)',
  "1": 'all and (min-width: 1440px) and (max-width: 1700px)',
  "2": 'all and (min-width: 1280px) and (max-width: 1439px)',
  "3": 'all and (min-width: 1024px) and (max-width: 1023px)'
}

$_resolutions = {
  "0": 1920,
  "1": 1440,
  "2": 1280,
  "3": 1024
}

for $index, $res in $breakpoints

  @media $res

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

Set the minimum width of CSS headers <h1, h2, h3> to align next to a floated image

I am dealing with a layout issue where headlines should be displayed next to floated images if there is enough space, and drop below the images if not. Unfortunately, I do not have access to the HTML code, so I need to solve this problem purely through CSS ...

The vertical tab layout in HTML and CSS is experiencing an issue where the active tab is not being shown above the

Currently, I am developing a web page featuring vertical tabs where each tab corresponds to an image and some content. However, the problem lies in the fact that the active tab is not displaying above the image as expected. In my attempt to resolve this i ...

Switch up the current Slick Carousel display by utilizing a div element

We have implemented the slick carousel to show only one slide at a time within the <div class='item__wrapper'>. Beneath this are three items, and we want the slick carousel to update when any of these items are clicked. Issues Using item ...

Is it possible to maintain the width of an element even when its height is set to 0px?

Let me provide a detailed explanation of my issue below, but the question remains the same: Is there a way to make an element hidden or invisible with a height of 0px or slightly more than 0px while maintaining its width for functionality in Safari? Here ...

Illuminated container with shading

I'm struggling to style a box with a unique glow effect and shadow at the bottom. I've hit a roadblock in creating this particular effect. The glow effect I am aiming for is shown here: https://i.stack.imgur.com/i2va8.png My attempts to create ...

CSS border alignment techniques

I am attempting to achieve the effect of having an orange border on top of a blue border, with only the orange border moving. I have noticed this design feature on various websites but have been unable to replicate it without removing the padding of the pa ...

The h3 element is not responding to the adjacent sibling selector

Below is my HTML DOM structure. I am trying to remove the margin and padding for all h3 elements that are immediate siblings of a div with the id "successor". I attempted to achieve this using the adjacent sibling selector "+", but unfortunately, I'm ...

Aligning content within a div block

I created a div block that houses a form structured like this: <div class="divClass"> <form id="frm" method="post" action="/NotDefinedYet/index.xhtml" class="frmClass"> <input type="text" name="j_idt9:j_idt10:Username" placehold ...

Exploring the World of 2D Array Animation

I'm in the process of creating a Pacman ghost using visual 2D arrays. I would like the ghost to move similar to this: https://i.sstatic.net/KPmUt.gif I am considering implementing CSS transitions for the movement, but I'm unsure about how to do ...

What is the best way to identify a specific pattern within a string using regular expressions in JavaScript?

Looking for a way to extract specific values from a string? let temp = 'Hi {{username}}, Your request with request id: {{requestId}} has been processed. Please contact your nearest shop.' Desiring an array like this from the string: ['user ...

What is the significance of using single quotation marks to enclose the 'raw' key in Tailwind?

While reviewing the Tailwind documentation on custom media queries, I came across an interesting option to create a fully custom breakpoint using the 'raw' key. After adding this to my configuration file, I noticed that when I saved the file, Pr ...

Switch out the rowspan attribute in HTML for a CSS alternative

Hello there, I've been experimenting with replacing my table layout with divs and CSS, but I'm struggling to find a way to replicate the behavior of the rowspan attribute. Here is the original code snippet: <table> <tr> <td> ...

"Transitioning from Bootstrap version 3.3.7 to the latest Bootstrap version 4.1.3

Everywhere I look, it says that Bootstrap 4.1 is compatible with Bootstrap 3, but when I update my project to the newer version, a lot of things stop working, such as this cookie consent feature. @{ Layout = ""; } @using Microsoft.AspNetCore.Http ...

String to bit array conversion

I have a string: cipher = "0111101110010111001001010000000110101000001000111101110000110101100100001100101100000" My goal is to slice it and save in an array like so: ["01111011", "10010111" ... ] After trying this code, I encountered an error: "cz. ...

Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way ...

Enable a single flex item to wrap across multiple lines

I have an HTML code snippet that needs to be styled using Flexbox. Specifically, I want to re-order the elements and create a 'line break' before the last item. How can I utilize Flexbox so that most flex items are treated as atomic units, but on ...

Unable to apply background-color CSS in playwright is not working as expected

I have been encountering an issue with applying the background-color CSS property in a Python template using the playwright package. I initially attempted to apply inline CSS style="background-color:red", then tried using a script tag with JavaScript, an ...

Having trouble getting a styled button to align properly with the text next to it

Usually I wouldn't reach out for help on a minor issue, but I've exhausted all my options. I've spent at least an hour attempting to solve this problem with vertical-align, padding adjustments, and more. It should be a simple fix. http://js ...

Not every image is contained within a DIV element

My current challenge involves wrapping an img element with a div. The issue I am facing is that the image is loading to the left of the div. I have already set the dimensions of the div to match those of the image, but it still loads incorrectly. I've ...