Soll ich @import oder Manifest-Dateien verwenden?

Question

Rails 3.1 führt eine neue Möglichkeit ein, sowohl JS als auch CSS mit der Einführung von Manifestdateien zu organisieren. Zum Beispiel könnte application.js so aussehen:

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .

Dies wird verschiedene Teile von Jquery, all Ihren eigenen JS, zusammenfügen und als eine einzige Datei an die Clients senden. Ganz einfach.

Leider ist das Bild bei SASS für mich nicht so klar. SASS hat bereits die Konkatenation mit @import integriert.

Sollte ich alle meine Teildateien in vollwertige SASS-Dateien umwandeln und sie dann mit der Manifestdatei konkatieren oder weiterhin @import verwenden? Warum?

Answer 1

Sprockets konvertiert alle Imports zu CSS, bevor sie zusammengeführt werden, daher kann es nicht verwendet werden, um Mixins und Variablen zwischen Dateien zu teilen. Ich vermute, dass es so bleibt, nur weil man SASS, LESS und CSS-Dateien auf diese Weise importieren kann.

Also so mache ich es:

• Wenn ich ERB einschließen muss (meistens für asset_path() Aufrufe), füge ich sie in meine Hauptdatei, application.css.scss.erb, ein
• Wenn ich vorgefertigtes CSS einbeziehen möchte, fordere ich es über Sprockets an, z.B. //=require jquerymobile
• In derselben Datei verwende ich den SASS @import Befehl, um alle Dateien explizit zu laden. Keine der importierten Dateien darf jedoch .erb sein.
  1. Das Grundlegende (z.B. Rücksetzung) und Imports mit Mixins laden
  2. Variablen deklarieren
  3. Die spezifischen Styles importieren

So sieht meine app.css im Moment aus. Vergessen Sie nicht das ";" und die Anführungszeichen:

// Für Variablen und Mixins müssen Sie SASS-Import verwenden, damit sie zwischen Dateien übertragen werden.
@import "reset.css.scss";
@import "mixins.css.scss";

$color_base: #9b2d31;
$color_background: #c64e21;

// Das Verwenden von asset_path ist wichtig, damit Browser die versionierte URL für das Asset verwenden.
// Dadurch können wir eine aggressive Zwischenspeicherung durchführen.
$logo-url: url(<%= asset_path("logo.png") %>);

@import "application/layout.css.scss";
@import "application/sidebar.css.scss";
@import "application/videos.css.scss";
@import "application/pages.css.scss";
...

Beachten Sie, dass ich immer noch den Asset-Pipeline von Rails 3.1 erkunde, daher können Ihre Ergebnisse variieren. Ich werde versuchen, zurückzukommen und zu aktualisieren, wenn ich noch etwas Interessantes finde.

Answer 2

Der beste Weg, dies zu lösen, ist die Verwendung der nativen @import-Anweisung, wie hier erklärt: https://github.com/rails/sass-rails#important-note

Diese Frage wurde bereits hier beantwortet: wie man Sprockets-Imports mit Sass verwendet

Ich hoffe das hilft! :)

Answer 3

Das sass-rails Gem erklärt ausdrücklich, dass der require-Syntax nicht mit SASS-Dateien verwendet werden soll - stattdessen sollen SASS @import Anweisungen verwendet werden.