CODEWITHSUNDEEP
htmlcsssassprepros
gempir
gempir

Reputation: 1911

Sass media queries compiled css

I've started using Sass and took my old css code and worked with it. For compiling I used prepros which has the option to compress CSS which saves some space.

The Problem I have is that when the SCSS code gets compiled into 1 line at the end the media query is empty

This is what my SCSS looks like, as an example 

@media all and (max-width: 900px) {
  body {
    background-color: red; }
}

and this is what gets compiled 

body{background-color:blue;}@media all and (max-width: 900px){}

I'm not 100% sure with spaces but you get the point I think, it's in 1 line of code. When putting the thing into a new line it get's correctly highlighted in sublime text aswell.

Is there a way to still compress my css but get media queries to work?

Edit: I checked and the output looks exactly like this 

@media all and (max-width: 900px){}

So it's not a bug with a missing space behind "and"

Edit2: Still not working, this is the exact code in my sublime text which doesn't work in the browser.

.overlay{-webkit-filter:blur(0);opacity:1;transition:all 0.5s ease-in-out}@media all and (max-width: 900px){}

Sublime doesn't think its right either https://i.sstatic.net/IAd5s.png

Where did my Code go? why is the compressed CSS missing the content of the media query

Upvotes: 0

Views: 1618

Answers (2)

KreaTief
KreaTief

Reputation: 406

I was facing this problem too a few days ago, I don't think it was the case before the prepros update, but I have not found a way to make it work, unless I place the media query within the selector instead of outside.

So if you actually do it like:

body{
    @media all and (max-width: 900px){
        background-color: red;    
    }
}

Prepros shoudl compile it correctly. This is the way SASS intends the media queries to work, but since normal CSS is basically valid SCSS, I think prepros really should start supporting it the other way round again.

Upvotes: 1

YOGESH PANDEY
YOGESH PANDEY

Reputation: 24

body{
background-color:red;
  @media all and (max-width:900px)
  {
    background-color:blue;
  }
 }

Upvotes: 0

Related Questions