Antworten auf deine Fragen:
Neues Thema erstellen

Bootstrap mittels SASS nutzen

Fugel

rebmeM

PSD Beta Team
Hallo Leute,

ich möchte bei einem neuen Projekt Bootstrap gern mal mittels reinem SASS nutzen. Bisher hab ich immer die fertige CSS genommen und nur meinen eigenen Code in SASS geschrieben. Ich hab eine Ordnerstruktur genommen, wie sie auf der Bootstrap-Seite beschrieben ist, nur nennt sich die custom.scss bei mir app.scss. Mein Scout (SCSS Compiler) zeigt mir keine Fehler und die Seite wird auch mit den Bootstrap Styles dargestellt. Ich hab mir wie beschrieben die _variables.scss rauskopiert und als neue _customVariables.scss eingebunden (diese wird auch erkannt). Wenn ich jetzt aber in dieser Datei z.B.
Code:
$h1-font-size:  $font-size-base * 2.5 !default;
in
Code:
$h1-font-size:  $font-size-base * 4.5 !default;
ändere, dann pasiert nichts. wenn ich es aber in der Originalen _variables.scss ändere, wird es wie gewollt ausgeführt. Was mach ich da falsch?

Edit:
In meiner app.scss steht folgendes:

Code:
@import "../bootstrap/scss/bootstrap";
@import "customVariables";
 

Fugel

rebmeM

PSD Beta Team
Fehler nun doch noch gefunden, die app.scss muss so aussehen:

Code:
@import "../bootstrap/scss/functions";
@import "customVariables";
@import "../bootstrap/scss/bootstrap";

Falls das nicht die korrekte methode ist, bitte ich um Aufklärung :)
 

Myhar

Hat es drauf

Wenn es bei dir so funktioniert dann ist es doch fein.
Ein Denkanstoß meinerseits warum es eventuell vorhin nicht funktioniert hat: Du veränderst dort ja keine Variabel direkt sondern nur den Faktor einer Multiplikation (und damit das Ergebnis für eine Variablengröße)
Kann es sein, dass zu dem Zeitpunkt font-size-base noch gar nicht definiert war? Hmm obwohl, jetzt, wo ich das schreibe: Du hast ja die komplette Datei kopiert, da sollte doch alles definiert werden.
!default brauchst du doch nicht extra dazuschreiben bei deinen Variablen, das heißt doch nur: Nimm diesen Wert, sofern er nicht woanders definiert wird. Du möchtest aber, dass er deine Werte immer nimmt.
Ich habe bei mir erst letzte Woche testweise so ein bootstrap-sass Projekt so aufgesetzt wie du es möchtest und da hat das mit "customVariables" so wie du das beschrieben hast eigentlich funktioniert.
 

Fugel

rebmeM

PSD Beta Team
Hallo Myhar,

danke für deine Antwort. Ja es liegt laut Internet an dieser functions.scss, die muss vorher geladen werden damit es funktioniert. Auch war wie du schon geschrieben hast das !default falsch, das habe ich schlicht weg vergessen zu entfernen. Man lernt halt nie aus :confused:
 

Myhar

Hat es drauf

Sehr komisch, ich habe jetzt auch extra nochmal bei meinem Projekt nachgesehen, da binde ich die functions.scss nach meiner customVariables ein. Zugegeben, ich habe da erst mal nur die primary-color und ein paar border-radius Attribute geändert, aber es funktioniert. Ist aber gut zu wissen, dass ich hier eventuell die functions.scss anders einbinden muss, falls es mal zu Problemen kommt.

hmm ok nachdem ich es mir im Detail angesehen habe: Klar, die variables.scss verwendet mixins aus der functions.scss. Man muss nicht die komplette variables.scss kopieren, es reicht, wenn in der customVariables.scss nur die Werte stehen, die geändert werden sollen. So lange dort dann keine mixins verwendet werden klappt es auch, dass man die Files von bootstrap nicht neu anordnen muss.

Beispiel, damit deutlicher wird, was ich meine:
In meiner _customVariables.scss steht nur folgendes:
Code:
$primary: pink;

$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;

Dadurch sieht man auch schneller, was jetzt eigentlich an bootstrap angepasst wurde und was noch die Standardwerte hat (alles, was nicht hier drinnen steht, hat noch den Standardwert)
In meiner app.scss habe ich dann folgendes:
Code:
// Settings
@import "customVariables"; <-- hier dürfen keine mixins stehen, die erst in _functions.scss definiert werden

// Bootstrap import
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins"; 

//@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
//@import "bootstrap/scss/type";
//@import "bootstrap/scss/images";

/*
@import ..... ;
und all der Rest von bootstrap.scss,
das was ich (noch) nicht benötige von bootstrap ist auskommentiert, damit das erzeugte SCSS nicht zu groß wird.
*/
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben