Question

If using HAML on Ruby on Rails, then

:sass
  #someDiv
    border: 3px dashed orange

won’t have any <style> tag around them.

and then

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

won’t kick on the :sass filter, but

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

will kick on the :sass filter, but it is outside of the <style> tag. So how can the :sass filter be used? We can manually wrap <style> around it, but it is not common use that we want to generate css from sass but not inside <style> tag in an HAML file.

Answer 1

The documentation related to your question is here at haml-lang.com and a more detailed explanation over at sass-lang.com.

I believe what you are missing is that sass should not be used in your haml files. They should be placed in public/stylesheets/sass with a .sass extension. They will be compiled into a .css file in public/stylesheets, which you then link into your layout.

From the sas-lang.com link:

For instance, public/stylesheets/sass/main.scss would be compiled to public/stylesheets/main.css.

You would then use the stylesheet_link_tag helper (or link the stylesheet manually):

<%= style_sheet_link_tag 'main' %>

If you really need to use sass within haml, here is the answer. You can not nest filters in haml. You apparently need to do something like this:

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

I believe this was the original response from the haml google groups.