senäh

17senäh und so…

Bootstrap Titelbild

Rails
23. Jul 2013
Kommentare: 1

Rails: Twitter Bootstrap und Sass

Kategorien: Rails | 23. Jul 2013 | Kommentare: 1

Für ein Studienprojekt wollte ich auf eine Kombination von Rails und Bootstrap bauen. Das normale Bootstrap basiert auf LESS, einem CSS-Preprozessor, der mittlerweile weitgehend seinem Konkurrenten Sass gegenüber als unterlegen angesehen wird.

Dazu kommt, dass Rails standardmäßig auf Sass setzt. Entsprechend wollte ich Bootstrap in der Sass-Variante verwenden, was dank der Gems in Ruby und schlauen Devs da draußen ein Kinderspiel ist.

Nichtsdestotrotz bin ich auf ein paar Stolpersteine gestoßen, die ich anderen gern ersparen will. Darum hier eine kurze Beschreibung des Vorgehens.

1. Gemfile

Als erstes muss wie üblich das Gem für Bootstrap in das Gemfile. Da ihr alle Asset-bezogenen Gems nur im Dev-Modus benötigt, macht es Sinn, das auch so im Gemfile festzuhalten.

group :assets do
  gem 'sass-rails', '~> 3.2.3'
  gem 'bootstrap-sass', '~> 2.3.2.0'
end

Anschließend noch ein bundle auf der Kommandozeile ausführen und JavaScript- sowie CSS-Dateien von Bootstrap stehen zur Verfügung.

2. JavaScript einbinden

Damit ihr die Bootstrap-Magic verwenden könnt, müsst ihr eurer Applikation erst mitteilen, dass die entsprechenden Dateien auch eingebunden werden sollen. Dazu geht ihr in die application.js und requiret die Datei wie üblich.

//= require bootstrap

Wichtig ist dabei, dass das Ganze nach der Einbindung von jQuery passiert, da Bootstrap auf jQuery angewiesen ist.

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Theoretisch könnt ihr auch nur einzelne Bootstrap-Komponenten einbinden. Hier also Anpassungen je nach Gusto vornehmen.

//= require bootstrap-scrollspy
//= require bootstrap-modal
//= require bootstrap-dropdown

3. CSS

Auch dieser Schritt scheint trivial, wenn man schon einige Erfahrungen mit der Asset Pipeline in Rails gesammelt hat. Allerdings liegt der Fehlerteufel im Detail. Ihr werdet sehen, was ich meine.

Einbindung als CSS (nicht empfohlen)

Die einfachste Variante ist – ähnlich der JS-Einbindung – die Datei im Header der application.css.scss zu requiren.

/*
 *= require bootstrap
 */

Das würde an sich funktionieren, bringt aber den Nachteil mit sich, dass all die Variablen und Mixins der Bootstrap-Dateien bei der weiteren Verarbeitung nicht zur Verfügung stehen. Solltet ihr nichts dagegen haben, hättet ihr von vornherein auch auf die LESS-Variante bauen können und wärt an dieser Stelle fertig. Vermutlich würdet ihr diesen Artikel dann aber nicht lesen 😉

Einbindung als Sass (empfohlen, aber Achtung!)

Tatsächlich wollte ich aber die Sass-Variablen haben, da sie dadurch im Nachhinein leicht zu verändern sind. Außerdem kann ich Farben einfacher referenzieren, ohne ständig den genauen Hex-Code kennen zu müssen.

In Sass erfolgt die Einbindung über den import-Befehl:

@import 'bootstrap';

Aber: das funktioniert nur, wenn die application.css.scss tatsächlich auf scss endet. Nur dann weiß die Applikation, dass sie die Datei einbinden und keinen extra HTTP-Request absenden soll, wie das im Sass-freien CSS der Fall wäre.

Wenn man fälschlicherweise den import-Befehl innerhalb einer normalen CSS-Datei verwendet (ohne scss-Endung), wird ein Request auf localhost:3000/assets/bootstrap abgefeuert. Das führt dazu, dass das komplette Bootstrap-JavaScript erneut geladen wird. Warum? Ihr verlangt das Asset bootstrap, was einmal in JavaScript- und einmal in CSS-Form vorliegt. Dabei wird das JavaScript scheinbar bevorzugt behandelt, wenn zwei Assets mit gleichem Namen existieren. Danke StackOverflow.

tl;dr

Sass und Bootstrap können durchaus gute Kumpels sein. Nur sollte in dem Fall bei CSS-Dateien in Rails niemals ohne scss-Endung gearbeitet werden.

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)