Ist es in SASS möglich, von einer Klasse in einer anderen Datei zu erben?

102

Die Frage sagt so ziemlich alles.

Wenn ich beispielsweise Twitter Bootstrap verwenden würde , könnte ich dann Klassen in meinem eigenen SASS-Stylesheet definieren, die von den CSS-Klassen von Bootstrap erben? Oder funktioniert die Vererbung in SASS nur im Rahmen einer einzelnen Datei?

— Dan Tao
quelle

180

JA! es ist möglich.

Wenn Sie möchten, dass alle <button>Elemente die .btnKlasse von erben den Standardschaltflächen Twitter Bootstrap

In Ihrer styles.scssDatei müssten Sie zuerst importieren _bootstrap.scss:

@import "_bootstrap.scss";

Dann unter dem Import:

button { @extend .btn; }

— agustibr
quelle

Ich fühle mich schlecht dafür, da die anderen Antworten diese Frage so ziemlich beantwortet haben (ich habe es nur versäumt, eine Weile zurückzuschauen und dann vergessen); aber ich akzeptiere Ihre Antwort, weil sie die vollständigste ist - dh sie führt mich durch den gesamten Prozess. Vielen Dank!

— Dan Tao

4

Funktioniert dies nur mit anderen SCSS-Dateien? Können Sie dies nicht mit CSS-Dateien tun?

— Crush

1

Seien Sie vorsichtig, wenn Sie @extendzusammen mit Bootstrap / einem beliebigen Framework verwenden, da es möglicherweise nicht wie erwartet funktioniert. Es gibt einige Dinge zu beachten, wie in diesem Beitrag beschrieben: stackoverflow.com/questions/30744625/…

— Patrik Affentranger

2

Aber dupliziert dies nicht das CSS von bootstrap.scss, wenn Sie dies in mehreren Dateien in Ihrem Projekt tun?

— Fritzmg

1

Importiert dies das Ganze bootstrap.cssin styles.cssoder nur .btn? Ich meine im Ausgabepaket? Wenn es vollständig importiert bootstrap.css, wird es styles.cssunnötig vergrößert .

— Außenseiter

8

** Ich könnte mich irren, aber wenn ich verstehe, was Sie tun @extend .classname;möchten , können Sie dann nicht einfach den Befehl in dem Element verwenden, das Sie erweitern möchten? Natürlich sollten Sie nur Ihren eigenen Code ändern, um die Aktualisierbarkeit zu gewährleisten.

— Mark Ernst
quelle

2

Meines Wissens müssen Sie@import die Datei mit den Klassen verwenden, die Sie in Ihrer SASS-Datei verwenden möchten, um sie in dieser Datei zu verwenden. Ich bin jedoch kein SASS / SCSS-Experte, sodass jemand möglicherweise eine andere Möglichkeit kennt, sie aus der Ferne zu verwenden, die mir nicht bekannt ist.

— ScottS
quelle

1

Wie die akzeptierte Antwort gezeigt hat, ist dies mit @import möglich, jedoch wurde @import von sass abgelehnt

Das Sass-Team rät von der fortgesetzten Verwendung der @ import-Regel ab. Sass wird es in den nächsten Jahren schrittweise auslaufen lassen und es schließlich vollständig aus der Sprache entfernen. Bevorzugen Sie stattdessen die @ use-Regel.

Die @ use-Regel ist jetzt besser für die Verwendung geeignet, da sie den Umfang des importierenden (Benutzer-) Moduls nicht verschmutzt. Leider ist die Nutzungsregel zum Zeitpunkt des Schreibens nur in Dart sass implementiert.

— ehab
quelle