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

Question

If you use HAML on Ruby on Rails, then

:sass #someDiv border: 3px dashed orange 

will not have a <style> around them.

and then

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

will not use filter :sass , but

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

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

Answer 1

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

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

From the sas-lang.com link:

For example, public / stylesheets / sass / main.scss will be compiled to public / stylesheets / main.css.

Then you used the stylesheet_link_tag helper (or a link to the stylesheet manually):

 <%= style_sheet_link_tag 'main' %> 

If you really need to use sass inside haml, here is the answer. You cannot nest filters in haml. You probably need to do something like this:

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

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

Answer 2

Starting from version 4.0.0 ,

Filter :sass now transfers its output to a style tag, as well as new filters :less and :scss .

Before 4.0.0, just wrap it in %style :

 %style :sass // so sassy! ;) 

Answer 3

You can also create your own filter to create a style tag.

The following example defines a new filter: 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 

So you can do it like this :)

 :csass #someDiv border: 3px dashed orange