SCSS中的目标特定选择器

Question

有没有办法在选择器链中修改其中一个祖先？

这是我想产生CSS：

#ViewCardDialog > header::after { 
    // styles 
} 

#ViewCardDialog.blocked > header::after { 
    // blocked styles 
} 

#ViewCardDialog.on-hold > header::after { 
    // on hold styles 
} 

，我想知道，如果这样的事情是可能的：

#ViewCardDialog { 

    > header { 

     &::after { 

      // styles 

      @parent(.blocked) & { 
       // blocked styles 
      } 

      @parent(.on-hold) & { 
       // on hold styles 
      } 
     } 

    } 

} 

Answer 1

如果附着的.blocked和.on-hold类的标题，您的父母选择器可能会工作，但我认为给你有什么，你想这个：

#ViewCardDialog { 
    > header::after { 
      // styles 
    } 
    &.blocked > header::after { 
     // blocked styles 
    } 

    &.on-hold > header::after { 
     // on hold styles 
    } 
} 

Answer 2

#ViewCardDialog { 
    > header{ 
     &:after { 
      // styles 
     } 
    } 
    &.blocked{ 
     > header{ 
      &:after { 
       // styles 
      } 
     } 
    } 
    &.on-hold{ 
     > header{ 
      &:after { 
       // styles 
      } 
     } 
    } 
} 

Answer 3

也许是有点混乱的代码，但是我发现达到你想要的最好的方式。首先，我定义一个变量父，然后我用在父添加类的替换功能，还需要@at-root指令，以防止选择重复：

SASS

#ViewCardDialog { 
    $root: &; 
    > header { 
    &::after { 
     color: blue; 
     @at-root #{selector-replace(&, $root, $root+".blocked")} { 
     color: red; 
     } 
     @at-root #{selector-replace(&, $root, $root+".on-hold")} { 
     color: green; 
     } 
    } 
    } 
} 

输出

#ViewCardDialog > header::after { 
    color: blue; 
} 
#ViewCardDialog.blocked > header::after { 
    color: red; 
} 
#ViewCardDialog.on-hold > header::after { 
    color: green; 
}