CODEWITHSUNDEEP
firefoxsass
christian
christian

Reputation: 2489

Using @-moz-document url-prefix() to target Firefox in SCSS

Is there an easy way to use "@-moz-document url-prefix()" to target Firefox in SCSS documents.

I have tried the following, but the parent reference "&" does not work in this context.

#nav li{
   display: table-cell;
   @-moz-document url-prefix(){
      & {
         display: inline-block;
      }
   }
}

Upvotes: 4

Views: 2634

Answers (1)

Dennis Best
Dennis Best

Reputation: 3654

I run into little issues like that from time to time. I mainly use this technique to fix IE8. Here's my fix:

First I install: https://github.com/rafaelp/css_browser_selector

This gives me browser and rendering classes for each browser:

<html class="gecko firefox firefox26 mac">

Then in my SCSS, I can do this:

.foo{ display: block; .firefox & { display; none; } }

This example hides .foo in Firefox. Using a & after the selector looks back up the tree. Isn't SASS awesome?!?!?

Alternatively, install the script and create a separate firefox.scss and just start it like so:

.firefox {
  // Do stuff here
}

As a rule, feature-detection using something like Modernizr is easier than playing to specific browsers, but sometimes you need to address various browser issues.

Upvotes: 0

Related Questions