selector inside Nested @media

@media screen
  .test
   .widget 
     padding 10px;
     @media (min-width: 600px) 
       .inner
         padding 20px

yeild to

@media screen {
  .test .widget {
    padding: 10px;
  }
}
@media screen and (min-width: 600px) {
  .inner {
    padding: 20px;
  }
}

instead of:

@media screen {
   .test .widget {
     padding: 10px;
   }
 }
 @media screen and (min-width: 600px) {
   .test .widget .inner {
     padding: 20px;
   }
 }

it may be related to #1882 , however I tested with the patch @5ee7c0e0850 , and it did not fixed.

[kizu]

We’ll fix this eventually, for the time being you can use this workaround mixin:

media($query)
  @media $query
    /{selector()}
      {block}

Used like this:

+media('screen')
  .test
    .widget
      padding: 10px

      +media('(min-width: 600px)')
        .inner
          padding: 20px

it would render as desired:

@media screen {
  .test .widget {
    padding: 10px;
  }
}
@media screen and (min-width: 600px) {
  .test .widget .inner {
    padding: 20px;
  }
}

[opl-]

Bump, just encountered this issue too. @kizu When’s the “eventually”? Been 2 years already. 😛