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?

css inheritance stylesheet sass Dan Tao
quelle

Antworten:

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