Rails 3.1, introduce una nueva forma de organizar JS y 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 .

Este va a agarrar varios bits de Jquery, todos los de su propia JS, concatenar juntos y servir como un archivo único para los clientes. Bastante Simple.

Por desgracia, el panorama no es tan claro para mí con SASS. SASS ya ha concatenación construido en el uso de @import.

Debo cambiar todos mis parciales en plena SASS archivos y, a continuación, concatenar usando el archivo de manifiesto o continuar con @importación? Por qué?

  • Yo ya tengo problemas con los códigos que se rompió en el nuevo activo de canalización de 3.1… todavía estoy claro sobre cómo usar sass en este

3 Comentarios

  1. 30

    Piñones convierte todas las importaciones a CSS antes de la concatenación, por lo que no puede ser usado para compartir mixins y las variables a través de los archivos. Supongo que esto va a permanecer de esa manera sólo porque usted puede importar SASS, LESS CSS y archivos a través de ese método.

    Así que aquí está cómo lo hago:

    • Si tengo ERB para incluir (sobre todo para asset_path() llamadas), los puse en mi archivo principal de la aplicación.css.secs.erb
    • Si tengo pueden vender CSS quiero incluir, yo lo requieran a través de los Piñones, por ejemplo, //=require jquerymobile
    • En ese mismo archivo, yo uso el SASS @import comando para cargar explícitamente todos los archivos. Ninguno de los @import ed archivos pueden ser .erb, aunque.
      1. de carga de las cosas básicas (por ejemplo, reset) y de las importaciones con los mixins
      2. declarar variables
      3. importar los estilos específicos

    Aquí mi app.css ve en el momento. No olvide 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 el Rails 3.1 activos de la tubería, por lo que su kilometraje puede variar. Voy a intentar volver & actualización si encuentro algo más interesante.

    • Sólo una nota que creo que se puede saltar la .css.secs de su @importaciones. Al menos, mi aplicación funciona sin ellos.
    • También es necesario el uso de *= depend_on «_partialName» en el manifiesto de encabezado para cada @dependencia de las importaciones. Esta duplicación es molesto, pero sin ella, piñones se dejan de reconocer cuando un parcial ha sido actualizado y por tanto no regenerar el archivo. Me he tomado la libertad de actualizar tu respuesta con tanto en este como en el cambio anterior. Siéntase libre de cambiar de nuevo si usted no está de acuerdo.
    • Usted no debe usar la Erb estilo ‘asset_path’ en SASS. En lugar de utilizar la gema sass-rails que le da una frescura método helper llamado de los activos de la ruta. Leer más en Características -> Activos Ayudantes en github.com/rails/sass-rails
    • Siempre he pensado que la ERB enfoque era un poco torpe. Voy a mirar en este SASS ayudante. Gracias Tomás!
    • También puede utilizar globos para @import en su aplicación.css.secs archivo, por ejemplo, «@import ‘secs/**/*'». Y usted no necesita usar depend_on ya, como cuando los archivos que se importan se actualizan los piñones se vuelva a compilar los activos.

Dejar respuesta

Please enter your comment!
Please enter your name here