Search code examples
csssassconditional-commentsbourbon

IE conditional comments with Sass and Bourbon

I want to serve different fonts to different browsers (see this question).

Is there a slick way to do this with Sass/Bourbon?

Here's what I have so far:

<!--[if IE]> -->
@include font-face("myicons", "myicons", $weight: normal, $style: normal,
                   $asset-pipeline: false);
<![endif]-->
<!--[if !IE]> -->
@include font-face("myicons", "myicons", $weight: normal, $style: normal,
                   $asset-pipeline: true);
<![endif]-->
Solution

  • This problem it's outside the sass scope, because is just a pre processor, and doesn't have a clue about the browser. Also is outside css scope deciding conditions for different browsers.

    You could do this adding a ie8 class to the html like html5 boilerplate does and then use a css rule to activate the font.

    body {
  @include font-face("myicons", "myicons", $weight: normal, $style: normal, $asset-pipeline: false);

  .ie8 & {
    @include font-face("myicons", "myicons", $weight: normal, $style: normal, $asset-pipeline: true);
  }
}

    and in html file

    <!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->