Mit bootstrap-sass können Sie Variablen überladen, indem Sie sie definieren, bevor Sie den Bootstrap (wie in der Dokumentation) importieren:
%Vor%Leider funktioniert es nicht mit Mixins, da sie in SASS neu definiert / überladen werden können.
Was wäre der beste Ansatz, um Twitter-Bootstrap-Mixins zu überlasten? Bisher scheint die einzige Möglichkeit das Juwel in lib zu kopieren und modify _mixins.scss hinzuzufügen oder meine benutzerdefinierte _mixins.scss nachher einzufügen.
Irgendeine Idee, um das wartbarer zu machen?
Laut dem Beitrag SASS Mixins erneut öffnen ist es möglich, Mixins zu überschreiben. Wenn Sie jedoch vor dem Aufruf von import "bootstrap"; einen benutzerdefinierten definieren, wird der in Bootstrap definierte überschrieben. Wenn Sie andererseits hinter den Import platzieren, ist der gesamte Bootstrap-Code fertig kompiliert, wenn Sie das Mixin neu definieren (siehe Ausgabe # 240 und Ausgabe # 420 ). Es besteht das Potenzial, dass Unterstützung für diese letztere Option in Zukunft hinzugefügt werden kann.
Bis dahin wäre eine Option, die ich mir vorstellen kann (nicht getestet), die Variablen und Mixins von _bootstrap.scss zu trennen, damit Sie die Mixins vor der Verwendung neu definieren können .
Kommentieren Sie zuerst die ersten beiden Importanweisungen in _bootstrap.scss :
%Vor%Dann sollte in Ihrer SASS-Datei, die Bootstrap importiert, diese so geändert werden, dass sie Folgendes enthält:
%Vor%In diesem Workflow würden Sie immer noch die Herstellerdateien bearbeiten, aber Sie könnten sie zumindest auf ein paar auskommentierte Zeilen beschränken.
Ich habe die Antwort von @ merv ähnlich gewählt, was erwähnenswert ist. Dieser Ansatz beinhaltet keine Bearbeitung des Lieferantencodes, übernimmt jedoch die Kontrolle über den Lieferantencode. Daher muss man sich Gedanken über Versionsänderungen machen, wenn der Bootstrap in der Zukunft aktualisiert wird.
Also ursprünglich @import "bootstrap"; Dies würde auf die Datei bootstrap.scss verweisen, die dann alle ihre Abhängigkeiten mit mehreren anderen @imports-Zeilen importiert. Wir möchten, dass sich unser Code in der Mitte dieser Pipeline befindet, um die Bootstrap-Mixins zu überschreiben. Ich kopierte einfach den gesamten Inhalt der bootstrap.scss Datei und fügte sie in meine my main.scss Datei ein und platzierte dann meine "Custom overrides" in:
main.scss
%Vor%Tags und Links ruby-on-rails-3 ruby-on-rails twitter-bootstrap sass mixins