@Extend i dziedzictwo w SASS | Wyjaśnione

Pisanie czystego i czytelnego kodu CSS, który nie powtarza wartości redundantnych, jest absolutnie możliwe przy użyciu składniowego niesamowitego arkusza stylów (SASS). Podczas gdy elementy stylizacji na stronie internetowej często spotykamy sytuację, w której elementy są stylizowane w podobny sposób, różnią się tylko drobnymi szczegółami. Pisanie arkusza stylów dla takich elementów może okazać się bardzo gorączkowe, ponieważ ilość zbędnych wartości byłaby ogromna. Aby uniknąć takich sytuacji SASS zapewnia zasadę @Extend. Ten post szczegółowo omawia tę zasadę.

SASS @Extend Reguła i dziedzictwo

Gdy twoje elementy są stylizowane w podobny sposób, różnią się tylko drobnymi szczegółami, chcesz odziedziczyć podobne właściwości jednego elementu do drugiego. Jest to możliwe przy użyciu reguły @Extend, która pozwala odziedziczyć właściwości używane dla jednego selektora do drugiego.

Spróbujmy zrozumieć tę zasadę i sposób, w jaki pomaga odziedziczyć podobne właściwości CSS za pomocą przykładu.

Przykład

W poniższym przykładzie zakładamy, że na naszej stronie internetowej pojawia się wiele wiadomości, takich jak komunikat o błędzie, komunikat ostrzegawczy, komunikat o sukcesie itp. W celu stylizacji tych elementów najpierw definiujemy klasę .Standard, który zawiera wszystkie właściwości, które są zbędne dla wszystkich rodzajów wiadomości pojawiających się na naszej stronie internetowej.

Sass

.Standarne wiadomości
Wyściółka: 5px;
granica: 2px stały szary;
Text-Align: Center;
kolor biały;

Teraz jest to podstawowy styl, który wszystkie wiadomości będą miały bez względu na ich typ. Teraz, jeśli chodzi o stylizację tych wiadomości osobno, możesz odziedziczyć te właściwości od .Klasa standardowa wiadomości wraz z pisaniem innych właściwości stylizacji dla każdego rodzaju wiadomości.

Sass

.Message-Error
@rozszerzyć .Standarne wiadomości;
kolor tła: niebieski;

.Warunek wiadomości
@rozszerzyć .Standarne wiadomości;
kolor tła: czerwony;

.Usunięcie wiadomości
@rozszerzyć .Standarne wiadomości;
kolor tła: zielony;

Teraz możesz zauważyć, że w powyższym fragmencie kodu użyliśmy reguły @Extend, aby odziedziczyć właściwości z .Tymczasem klasa standardowa wiadomości, aby stylizować każdy rodzaj wiadomości, nadając każdemu z nich inny kolor tła. Może to zaoszczędzić dużo czasu i energii, a liczba linii kodu zmniejsza.

Powstały plik wyjściowy CSS będzie wyglądał tak.

.Standarne wiadomości, .błąd wiadomości, .Warunek wiadomości, .Usunięcie wiadomości
Wyściółka: 5px;
granica: 2px stały szary;
Text-Align: Center;
kolor biały;

.Message-Error
kolor tła: niebieski;

.Warunek wiadomości
kolor tła: czerwony;

.Usunięcie wiadomości
kolor tła: zielony;

Odnosząc się do tych klas w kodzie HTML, nie ma potrzeby odwoływania się do wielu klas, możesz po prostu użyć klas przypisanych do każdej wiadomości. Na przykład nie używaj tego

, Po prostu użyj tego

.

Wniosek

Reguła @Extend w SASS pozwala odziedziczyć podobne właściwości, gdy twoje elementy są stylizowane w podobny sposób, różnią się tylko drobnymi szczegółami. Możesz zdefiniować podstawowy styl takich elementów w jednej klasie, a następnie odziedziczyć tę klasę za pomocą reguły @Extend w innych klasach, a także dodatkową stylistykę dla tego konkretnego elementu. Korzystanie z tej reguły może zaoszczędzić dużo czasu i zmniejszyć linie kodu, dzięki czemu kod jest czysty.