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; 
}