Czy w SASS można dziedziczyć z klasy w innym pliku?

102

To pytanie mówi wszystko.

Na przykład, gdybym używał, powiedzmy, Twitter Bootstrap , czy mógłbym zdefiniować klasy we własnym arkuszu stylów SASS, które dziedziczą po klasach CSS Bootstrap? A może dziedziczenie w SASS działa tylko w zakresie jednego pliku?

— Dan Tao
źródło

180

TAK!to jest możliwe.

Jeśli chcesz, aby wszystkie <button>elementy dziedziczyły .btnklasę przycisków domyślnych Twitter Bootstrap

W swoim styles.scsspliku musiałbyś najpierw zaimportować _bootstrap.scss:

@import "_bootstrap.scss";

Następnie poniżej importu:

button { @extend .btn; }

— agustibr
źródło

Czuję się źle, że to robię, ponieważ inne odpowiedzi w zasadzie odpowiadały na to pytanie (po prostu zapomniałem na chwilę sprawdzić, a potem zapomniałem); ale przyjmuję twoją odpowiedź, ponieważ jest ona najbardziej kompletna - tj. prowadzi mnie przez cały proces. Dzięki!

— Dan Tao,

4

Czy to działa tylko z innymi plikami SCSS? Czy nie możesz tego zrobić z plikami CSS?

— zmiażdż

1

Zachowaj ostrożność, gdy używasz @extendrazem z bootstrapem / dowolnym frameworkiem, ponieważ może nie działać zgodnie z oczekiwaniami. Jest kilka rzeczy, o których należy pamiętać, jak opisano w tym poście: stackoverflow.com/questions/30744625/ ...

— Patrik Affentranger

2

Ale czy to nie powiela CSS z bootstrap.scss, jeśli robisz to w wielu plikach w projekcie?

— fritzmg

1

Czy to importuje całość bootstrap.cssdo, styles.cssczy tylko .btn? Mam na myśli pakiet wyjściowy? Jeśli importuje całość bootstrap.css, styles.cssniepotrzebnie zwiększy rozmiar .

— darKnight

8

** Mogę się mylić, ale jeśli dostanę to, co próbujesz zrobić, czy nie możesz po prostu użyć @extend .classname;polecenia wewnątrz elementu, który chcesz rozszerzyć? Oczywiście powinieneś modyfikować tylko swój własny kod, aby zachować możliwość aktualizacji.

— Mark Ernst
źródło

2

O ile mi wiadomo, musisz użyć@import pliku zawierającego klasy, których chcesz użyć w pliku SASS, aby wykorzystać je w tym pliku. Nie jestem jednak ekspertem SASS / SCSS, więc ktoś może znać inny sposób na ich zdalne użycie, którego nie jestem świadomy.

— ScottS
źródło

1

Tak jak wykazała zaakceptowana odpowiedź, jest to możliwe w przypadku @import, jednak @import został wycofany przez sass

Zespół Sass odradza dalsze stosowanie reguły @import. Sass będzie stopniowo wycofywał go w ciągu najbliższych kilku lat i ostatecznie całkowicie usunie go z języka. Zamiast tego wolę regułę @use.

Reguła @use jest teraz lepiej przystosowana do użytku, ponieważ nie zanieczyszcza zakresu modułu importującego (użytkownika). niestety w chwili pisania tego tekstu zasada użycia jest zaimplementowana tylko w Dart sass.

— ehab
źródło

istnieje kompilator Dart Sass, który dobrze kompiluje Sass przy użyciu @use. Ale musisz określić, który plik chcesz skompilować w ustawieniach, w przeciwnym razie wszystkie pliki zostaną skompilowane, nawet jeśli chcesz połączyć je w jeden plik i tylko skompilować.

— Tobi