2010-06-12 17 views
7

Si se utiliza HAML en Ruby on Rails, entoncesEn HAML en Ruby on Rails, cómo usar el filtro: sass?

:sass 
    #someDiv 
    border: 3px dashed orange 

no tendrá ninguna etiqueta <style> alrededor de ellos.

y luego

:css 
    :sass 
    #someDiv 
     border: 3px dashed orange 

no va a poner en el filtro :sass, pero

:css 
:sass 
    #someDiv 
    border: 3px dashed orange 

se iniciará en el filtro :sass, pero está fuera de la etiqueta <style>. Entonces, ¿cómo se puede usar el filtro :sass? Podemos envolver manualmente <style> alrededor de él, pero no es de uso común que deseemos generar css desde sass pero no dentro de la etiqueta <style> en un archivo HAML.

Respuesta

12

La documentación relacionada con su pregunta es here en haml-lang.com y una explicación más detallada en sass-lang.com.

Creo que lo que se está perdiendo es que sass no debe usarse en sus archivos haml. Deben colocarse en public/stylesheets/sass con una extensión .sass. Se compilarán en un archivo .css en public/stylesheets, que luego vinculará a su diseño.

Desde el enlace sas-lang.com:

Por ejemplo,/hojas de estilo/Sass/main.scss pública serán recopilados a/hojas de estilo/main.css pública.

A continuación, los auxiliares de stylesheet_link_tag (o enlazar manualmente la hoja de estilo):

<%= style_sheet_link_tag 'main' %> 

Si realmente necesita usar Sass dentro haml, here es la respuesta. No puedes anidar filtros en haml. Evidentemente, usted tiene que hacer algo como esto:

%style(type="text/css") 
    :sass 
    div 
     color: red 

creo this fue la respuesta original de los grupos haml Google.

+4

hm ... si Sass no se deben utilizar en un archivo haml, entonces el filtro Sass no debería haber existido? –

+0

Tiene sus usos, pero el uso de una hoja de estilo externa tiende a ser más fácil de mantener y SECO. Referencia: http://stackoverflow.com/questions/1127927/is-using-the-style-attribute-frowned-upon – Awgy

+0

El filtro Sass/scss sería útil, por ejemplo, para tener 404, 422 y 500 como páginas con diseño y disposición separados el almacenamiento en caché se activó, por lo que al implementarlo, solo solicita páginas de alguna manera para obtener archivos html estáticos. Simplemente no me gusta escribir css simple. – tig

2

También puede escribir un filtro personalizado para generar etiquetas de estilo.

El siguiente ejemplo define un nuevo filtro ': csass'.

require "haml/filters" 
module Haml::Filters::Csass 
    include Haml::Filters::Base 
    include Haml::Filters::Sass 
    lazy_require 'sass/plugin' 
    def render(text) 
    src = super 
    "<style>#{src}</style>" 
    end 
end 

Para que pueda hacerlo de esta manera :)

:csass 
    #someDiv 
    border: 3px dashed orange 
10

Since 4.0.0,

El filtro :sass ahora envuelve su salida en una etiqueta de estilo, al igual que el nuevo :less y :scss filtros.

Antes de 4.0.0, simplemente se envuelve en %style:

%style 
    :sass 
    // so sassy! ;)