1

This is a basic example but I would like to add a class to a parent in a nested child.

Desired CSS:

.addon .checkbox { background: blue; }
.addon.active .checkbox { background: red; }

Using SASS

 .addon {
       .checkbox { 
         background: blue; 
         .active & { background: red }
         .addon.active & { background: red }
       }
 }

This gives me the following: 

.addon .checkbox {
  background: blue;
}
.active .addon .checkbox {
  background: red;
}
.addon.active .addon .checkbox {
  background: red;
}

As you can see I am not able to get the desired result using the & symbol. Can I do what I want using nesting or would I have to write it out using normal css ways.

Answered:

.addon {
    .checkbox { 
       background: blue; 
       @at-root #{selector-replace(&, '.addon', '.addon.active')} {
          background: red;
       }
   } 
}
cneu
  • 51
  • 4
  • Also related: http://stackoverflow.com/questions/24764498/is-it-possible-to-reference-a-further-parent-than-just-the-one-above – cimmanon Apr 17 '15 at 02:17

1 Answers1

0

What you're looking for is

.addon {
  .checkbox {...}

  &.active {
    .checkbox {...}
  }
}

Sadly, there's no shorter form for writing selectors like these.

Etheryte
  • 24,589
  • 11
  • 71
  • 116