ruby on rails 3 - images - ¿Debo usar @import o archivos de manifiesto?

sass-rails

Question

Rails 3.1 presenta una nueva forma de organizar JS y CSS con la introducción de archivos de manifiesto. Por ejemplo, application.js podría verse así:

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

Esto tomará varios bits de Jquery, todos sus propios JS, los concatenará juntos y lo publicará como un único archivo para los clientes. Suficientemente simple.

Lamentablemente, la imagen no es tan clara para mí con SASS. SASS ya tiene una concatenación incorporada usando @import .

¿Debo cambiar todos mis parciales en archivos SASS completos y luego concatenarlos usando el archivo de manifiesto o continuar usando @import? ¿Por qué?

Answer 1

La gema sass-rails https://github.com/rails/sass-rails#important-note no usa la sintaxis require con los archivos SASS; en su lugar, use las declaraciones @import de SASS.

Answer 2

La mejor manera de resolver esto es usar la directiva @import nativa como se explica aquí: https://github.com/rails/sass-rails#important-note

Esta pregunta ya fue respondida aquí: cómo usar las importaciones de piñones con sass

¡Espero que esto ayude! :)

Answer 3

Piñones convierte todas las importaciones a CSS antes de concatenar, por lo que no se puede usar para compartir mixins y variables entre archivos. Supongo que esto va a seguir así solo porque puedes importar archivos SASS, LESS y CSS a través de ese método.

Entonces, así es como lo hago:

• Si tengo que incluir ERB (principalmente para asset_path() a asset_path() ), las pongo en mi archivo principal, application.css.scss.erb
• Si he enviado CSS que deseo incluir, lo necesito a través de Piñones, por ejemplo //=require jquerymobile
• En ese mismo archivo, utilizo el comando SASS @import para cargar explícitamente todos los archivos. Ninguno de los archivos @ importados puede ser .erb.
  1. cargar las cosas básicas (por ejemplo, restablecer) e importar con mixins
  2. declarar variables
  3. importar los estilos específicos

Así es como se ve mi app.css en este momento. No olvides el ";" y las citas:

// 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";
...

Tenga en cuenta que todavía estoy explorando la cartera de activos de Rails 3.1, por lo que su millaje puede variar. Intentaré volver y actualizar si encuentro algo más interesante.