In HAML on Ruby on Rails, how to use the :sass filter?

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.

Answer 2

Since 4.0.0 ,

The :sass filter now wraps its output in a style tag, as do the new :less and :scss filters.

Before 4.0.0, just wrap it in %style :

%style
  :sass
    // so sassy! ;)

Answer 3

You can write a custom filter to generate style tag also.

The example below defines a new ':csass' filter.

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

So you can do it like this :)

:csass
  #someDiv
    border: 3px dashed orange