0

Is there a way to compile SCSS with media queries and a few breakpoints to a CSS without media queries that will only contain styles for a specific screen size I pass to the SCSS compiler?

example SCSS file:

body {background:red}

@medai query only screen and (max-width: 767px){        
    a {
        margin: 10px
    }       
}

@medai query only screen and (max-width: 1280px){       
    a {
        color: orange;
    }       
}

I want to compile the above SCSS with media queries and get a CSS file WITHOUT the media queries with all the appropriate styles that a browser would apply if, say, a browser window width was 1600px or 320px;

expected CSS for 1600px;

body {background:red}
a {margin: 10px}
a {color: orange;}

expected CSS for 320px;

body {background:red}
a {margin: 10px}

I need it to compile css for IE7 which doesn't support media queries.

maestr0
  • 5,318
  • 3
  • 28
  • 27
  • possible duplicate of [Merging media queries, using SASS and Breakpoint (Respond-To)](http://stackoverflow.com/questions/17478693/merging-media-queries-using-sass-and-breakpoint-respond-to) – cimmanon Feb 07 '14 at 13:39

1 Answers1

0

I don't think that's possible, but what you can do is the following:

Create 3 scss files: _global.scss, 1600px.scss, 320px.scss

(note the "_" prepending the _global.scss file, this is so the compiler won't compile it to a css file)

Then inside 1600px.scss & 320px.sccs you can do @import "global";

Then inside the head of your html: 

<link rel="stylesheet" media="(max-width: 767px)" href="320px.css" />
<link rel="stylesheet" media="(max-width: 1280px)" href="1600px.css" />

U can find more info about import at http://sass-lang.com/guide

Think Graphical
  • 351
  • 1
  • 11