0

I am using Modernizr which sets up a touch or no-touch class on the <html> tag. Now I am using SASS and in a nested clause I had

li:hover {
  // ...
}

I would like to apply this definition only if we have no-touch on the html tag.

.no-touch li:hover {
  // ...
}

Doesn't work, since it's on the root. Is there a SASS shorthand or way to get what I want without creating a completely new CSS rule outside of all the definitions.

<html class="no-touch">
  <body>
    <div>
    <!-- a lot of HTML -->
               <ul>
                 <li> ... </li>
               </ul>
    <!-- /a lot of HTML -->
    </div>
  </body>
</html>

If I would use the & operator like this:

 &.no-touch {
   li:hover {

 }

It would append the no-touch rule only to the surrounding ul element, resulting the following generated CSS:

 ul.no-touch li:hover {

 }

Which doesn't cover the case, since no-touch is defined on <html> and not <ul>

Also taken from the SASS documentation:

& will be replaced with the parent selector as it appears in the CSS

The parent selector does not reference to the <html> tag

Mahoni
  • 7,088
  • 17
  • 58
  • 115
  • @cimmanon But the `&` operator only adds it to the immediately surrounding element and not the outmost – Mahoni Mar 09 '15 at 18:15
  • 1
    Perhaps you should edit your question to explain how `&` didn't work for you. That description isn't totally clear. – BoltClock Mar 09 '15 at 18:17
  • 1
    @BoltClock Well, I added a HTML example which should make clear that the marked duplicate answer does answer a different scenario. – Mahoni Mar 09 '15 at 18:23
  • 1
    @Mahoni Still not seeing how this is not a duplicate of the other question. You should try reading the entire answer. – cimmanon Mar 09 '15 at 18:24
  • 1
    @cimmanon Fair enough, added another example which explicitly shows why the `&` operator doesn't work for me – Mahoni Mar 09 '15 at 18:27
  • @Mahoni Did you even *look* at the answer? There are 3 examples of code given. One of them applies to your case. I suggest you read it again. – cimmanon Mar 09 '15 at 18:32
  • ..in other words, `.no-touch & { li:hover { .. } }` is what you're looking for. – Josh Crozier Mar 09 '15 at 18:35
  • 1
    @JoshCrozier Why would you reopen this? It is a clear duplicate. – cimmanon Mar 09 '15 at 18:40
  • @cimmanon It's not an exact duplicate. The duplicate you linked to doesn't explicitly cover this. It merely states *" you can place the `&` at virtually any position you like [...] this somehow breaks your nesting structure"*. I don't think it's a **clear** duplicate, as you're suggesting. I wasn't the only one who voted to open this. – Josh Crozier Mar 09 '15 at 18:43
  • @cimmanon That's a better duplicate in my opinion. Voted to close as a dupe of http://stackoverflow.com/questions/16832042/add-ancestor-selector-in-current-sass-nesting .. btw, I don't think this question deserves the downvotes that it's receiving. – Josh Crozier Mar 09 '15 at 18:47

0 Answers0