Używam Sass (.scss) do mojego obecnego projektu.
Poniższy przykład:
HTML
<div class="container desc">
<div class="hello">
Hello World
</div>
</div>
SCSS
.container {
background:red;
color:white;
.hello {
padding-left:50px;
}
}
To działa świetnie.
Czy mogę obsługiwać wiele klas podczas używania stylów zagnieżdżonych.
W powyższym przykładzie mówię o tym:
CSS
.container.desc {
background:blue;
}
W tym przypadku div.container
normalnie wszystko byłoby, red
ale div.container.desc
byłoby niebieskie.
Jak mogę zagnieździć to w container
Sass?
Odpowiedzi:
Możesz użyć referencyjnego selektora rodzica
&
, zostanie on zastąpiony selektorem rodzica po kompilacji:Na przykład:
&
Będzie całkowicie rozwiązać, więc jeśli rodzic selektor jest zagnieżdżony się, gniazdowania zostaną rozwiązane przed wymianą&
.Notacja ta jest najczęściej używana do pisania pseudoelementów i klas :
Możesz jednak ustawić
&
praktycznie dowolną pozycję * , więc możliwe są również:Należy jednak pamiętać, że to w jakiś sposób psuje strukturę zagnieżdżania, a tym samym może zwiększyć wysiłek związany ze znalezieniem określonej reguły w arkuszu stylów.
*: Żadne inne znaki oprócz białych znaków nie są dozwolone przed
&
. Nie można więc wykonać bezpośredniego połączeniaselector
+&
-#id&
zwróciłoby błąd.źródło
&
jest pseudoelementy i pseudoklasy. Na przykład:&:hover
.&
jest używany na końcu linii, umieszcza tę linię na początku pozostałych klas na wszystkich pozostałych poziomach. Możesz łączyć elementy, wykonując czynności&.desc
poniżej.container
, które dołączałyby do niego .desc, w wyniku czego.container.desc
W takim przypadku myślę, że musisz użyć lepszego sposobu tworzenia nazwy klasy lub konwencji nazwy klasy. Na przykład, tak jak powiedziałeś, chcesz, aby
.container
klasa miała inny kolor w zależności od określonego zastosowania lub wyglądu. Możesz to zrobić:SCSS
CSS
źródło
.container--desc
i skończysz bez rezultatów.Odpowiedź Christopha jest idealna. Czasami jednak możesz chcieć iść więcej klas niż jedna. W takim przypadku możesz wypróbować funkcje
@at-root
i#{}
css, które pozwoliłyby dwóm klasom głównym siedzieć obok siebie przy użyciu&
.To nie zadziałałoby (z powodu
nothing before &
reguły):Ale to (przy użyciu
@at-root plus #{&}
):źródło