¿Debo usar @import o archivos de manifiesto?

Question

Rails 3.1 presenta una nueva forma de organizar tanto JS como CSS con la introducción de archivos de manifiesto. Por ejemplo, application.js podría tener este aspecto:

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

Esto agarrar varios bits de jQuery, todos los de su propia JS, concatenar juntos y servir como un solo archivo a los clientes. Suficientemente simple.

Desafortunadamente, 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 completos SASS y luego concatenar usando el archivo de manifiesto o continuar usando @ importación? ¿Por qué?

Answer 1

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

Así que aquí es cómo lo hago:

• Si tengo ERB para incluir (sobre todo para las llamadas asset_path()), me los puso en mi archivo principal, application.css.scss.erb
• Si yo he enviado un CSS que deseo incluir, lo necesito a través de Piñones, por ej. //=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. carga de las cosas básicas (por ejemplo reset) y las importaciones con mixins
  2. declarar variables
  3. importar los estilos específicos

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

// 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 kilometraje puede variar. Intentaré volver & si encuentro algo más interesante.

Answer 2

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

Esta cuestión ya ha sido resuelta aquí: how to use sprockets imports with sass

Espero que esto ayude! :)

Answer 3

Los Sass-carriles joya explicitly states no utilizan la sintaxis require con ficheros SASS - @import utilizan las declaraciones de SASS lugar.