Devrais-je utiliser des fichiers @import ou manifestes?

Question

Rails 3.1 introduit une nouvelle façon d'organiser les deux CSS et JS avec l'introduction de fichiers de manifeste. Par exemple, application.js pourrait ressembler à ceci:

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

Cela permettra de saisir les différents bits de Jquery, tous de votre propre JS, de les enchaîner ensemble et servir comme d'un fichier unique des clients. Assez Simple.

Malheureusement, la situation n'est pas si clair pour moi avec SASS. SASS a déjà concaténation construit en utilisant @import.

Dois-je changer tous mes partiels en plein SASS des fichiers et de les concaténer en utilisant le fichier de manifeste ou de continuer à utiliser @import? Pourquoi?

Answer 1

Les pignons convertit toutes les importations en CSS avant de concaténation, de sorte qu'il ne peut pas être utilisé pour partager des mixin et variables dans des fichiers. Je devine que cela va rester de cette façon simplement parce que vous pouvez importer SASS, LESS CSS et des fichiers via cette méthode.

Alors, voici comment je le fais:

• Si j'ai ERB à comprendre (surtout pour asset_path() des appels), je les ai mis dans mon fichier principal de l'application.css.scss.erb
• Si j'ai vendored CSS je veux comprendre, j'ai besoin d'elle via les Pignons, par exemple, //=require jquerymobile
• Dans ce même fichier, j'utilise SASS @import de commande pour charger explicitement tous les fichiers. Aucun des @import ed fichiers peuvent être .erb bien.
  1. charger les trucs de base (par exemple, reset) et les importations avec mixin
  2. déclarer des variables
  3. importer les styles spécifiques

Voici comment mon application.css est en ce moment. Ne pas oublier le ";" et les guillemets:

// Using SASS import is required for variables and mixins to carry over between files.
@import "reset.css.scss";
@import "mixins.css.scss";

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

// Using asset_path is important for browsers to use versioned url for the asset.
// This lets us do aggressive caching.
$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";
...

Remarque que je suis encore à explorer les Rails 3.1 asset pipeline, de sorte que votre kilométrage peut varier. Je vais essayer de revenir et de mise à jour si je trouve autre chose intéressante.

Answer 2

La meilleure façon de résoudre ce problème consiste à utiliser la directive native @import comme expliqué ici: https://github.com/rails/sass-rails#important-note

Cette question a déjà été répondue ici: comment utiliser les importations de pignons avec sass

J'espère que cela t'aides! :)