SASS是否支持元素規格作爲嵌套選擇器？

比方說，你有這樣的定義SASS（虛幻爲例）：SASS是否支持元素規格作爲嵌套選擇器？

.class { 
    margin: 1px; 
    background: black; 
    color: white; 

    &:hover { 
     color: red; 
    } 
} 

a.class { 
    margin: 1px; 
    background: black; 
    color: yellow; 

    &:hover { 
     color: blue; 
    } 
}

現在，我們可以把同一類的a規格爲嵌套選擇？例如。像這樣（僞代碼）：

.class { 
    margin: 1px; 
    background: black; 
    color: white; 

    &:hover { 
     color: red; 
    } 

    // Some selector to show that the current class 
    // should be applied to this element (?) 
    a.& { 
     color: yellow; 

     &:hover { 
      color: blue; 
     } 
    } 
}

來源

2016-10-24 Propaganistas

我不認爲這是有可能的。此外，在這種特定情況下，您根本不會從原始類繼承任何東西，這使得嵌套無用。如果您要從初始類繼承更多，我認爲更好的方法仍然是爲'a'使用'@extend .class'。 – disinfor

不可能。你可以玩http://www.sassmeister.com/。但是你的實際目標是什麼？ – andi

嗯，我希望以某種方式對某個類的所有元素進行樣式設置，但如果該類的元素是錨點，則只想更改一個CSS屬性。我很好奇SASS是否以這種簡潔的方式支持這樣的事情。 – Propaganistas

我有一個解決辦法。它有點棘手，但它的工作很好。

.class { 
    color: yellow; 

    &:hover { 
     color: blue; 
    } 
    &[href] { 
     color: white; 

     &:hover { 
      color: red; 
     } 
    } 
}

Working Fiddle

來源

2016-10-24 19:27:59

這是一個很好的例子！ – disinfor

@disinfor非常感謝！ –

使用'href'屬性很好的破解！ – Propaganistas

你可以考慮寫一個mixin

@mixin sample($color,$hovercolor) { 
     margin: 1px; 
    background: black; 
    color: $color; 

    &:hover { 
     color: $hovercolor; 
    } 
    } 

    .class{ @include sample(white,red)} 
    a{ @include sample(yello,yellow)}

希望這有助於

來源

2016-10-24 19:05:08 Geeky

SASS是否支持元素規格作爲嵌套選擇器？

回答

相關問題