0

I would like to use a map with values which are numbers , and create media queries from it.

But I did not succeed in concatenating the number with 'px' to form the media query.

$grid-breakpoints: (
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200
) !default;

(edited):

@each $name, $minWidth in $grid-breakpoints { 

   @media (min-width: ($minWidth + 'px')) {      <-- doesn't work
       .flex-1-#{$name} {
            flex: 1 0 0%;
        } 
  }
}

I tried to concatenate the number in other ways

#{$minWidth + 'px'}


($minWidth + 'px'))

But it doesn't work. It works if I use values where px is already added

$grid-breakpoints: (
  xs: 0,
  sm: 576px,    <--- px added

But I would like to be able to modify the number, for instance subtracting 1 from it, and I haven't been able do that when it includes px.

Galivan
  • 4,842
  • 9
  • 44
  • 76
  • Your code compiles for me. Sass won't output your `@media` queries unless you put at least one CSS rule inside, though. – mfluehr Aug 25 '22 at 13:54
  • Yes I do have rules inside, like .flex-1-#{$breakpointName} { flex: 1 0 0%; } – Galivan Aug 25 '22 at 16:06
  • Your code works. Just tested this in my browser. @debug $minWidth + 'px' yields the concatinated value and unit. Try applying these rules inside body for example instead of inside a class and go from there. Also if you want to modify string values refer to this thread - https://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass – aleksKamb Aug 30 '22 at 10:57

0 Answers0