Отключить парения свойства для элемента в SASS

Question

Предположим, что мы имели:

.a { 

    /** Some properties here **/ 

    .b { 
     /* Some properties here **/ 
    } 

    &:hover { 
     .b { 
      /* change b here */ 
     } 
    } 
} 

И есть элемент <div class = "b">, есть способ предотвратить свойство парения из применяются к этому DIV?

Я пробовал:

.a { 

    /** Some properties here **/ 

    .b { 
     /* Some properties here **/ 
    } 

    .c { 
     /* empty */ 
    } 

    &:hover { 
     .b:not(.c) { 
      /* change b here */ 
     } 
    } 
} 

И я также установить класс быть <div class = "b c">.

Любая помощь была бы оценена, если этот файл scss поделился другими файлами, поэтому я не хочу слишком сильно его менять.

Answer 1

Предположим, я только хочу применить его к div с классом b, но не b и c. Как мне это сделать?

Это должно сделать это, предполагая, что все элементы, которые вы хотели бы, для эффекта парения обратиться в div элементы:

&:hover { 
    div:not([class*='b c']) { 
     /* stuff here */ 
    } 
} 

Имейте в виду, что порядок классов имеет важное значение, так класс c должен наступить сразу после класса b.

Codepen

Читайте о том, что делает каждый селектор here.