How to add a mixin to a chunk of CSS?

Question

I made a huge mistake and I'm looking for some help.

After building a site with CSS, mobile-first responsive, with respond.js as a polyfill, after I tested it in IE compatibility mode during developing I realized at the end that there's a big conflict between respond.js and the javascript used by the CMS and the Internet Explorer 8 blocks everything from rendering. I decided to drop the polyfill entirely and go the SASS way with it, using a MQ mixin.

Right now the problem is that IE8 is seeing the mobile version of the website (sorry I can't give you a link to it)

I have included conditionizr for < ie9 and I have used css2sass to get my CSS nested a little.

I found a great MQ mixin by Stuart Robson (here) ** that I have not yet started to add it, the question is, do I have any other option than to go and edit everywhere I used mq in the code?

The mixin I think I have to use looks like this ** (adapted it a little to make a better use of it for my problem):

@mixin mq($point, $IE9: true, $query1: min, $query2: width) {
@if $IE9 == true{
    @media screen and (#{$query1}-#{$query2}: $point +px) {
        @content;
    }
    .lt-ie9 & {
        @content;
    }
}

@else {
    @media screen and (#{$query1}-#{$query2}: $point +px) {
        @content;
    }
}

}

I'm not going to debug the JavaScript code to make the polyfill work. I have tried several other scripts (including css3-mediaqueries) but I dropped the idea of help from javascript and I want to go the SASS way.

Given that there's a chunk of almost 6k lines of SASS code, is there any SASS way to help me with adding the mixin somehow so that I end up getting something like this?

    @media screen and (min-width: 320px) {
 body {
  margin: 0;
}
}
.lt-ie9 body {
  margin: 0;
}

I learned my lesson, started using BrowserStack and I will only go with that mixin from now on. There's still the problem at hand that has to be fixed.. Thanks in advance.

Regards

Answer 1

I will edit all the MQs to use the new mixin and I also have to learn more SASS and stop asking silly questions about it! :) Thanks everyone!