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.

score 13 · Accepted Answer · edited May 23 '17 at 11:45

13

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.

edited May 23 '17 at 11:45

Community

1
1

answered Jun 12 '10 at 09:47

Awgy

1,082
11
14

4

hm... if sass should not be used in an haml file, then the sass filter shouldn't have existed? – nonopolarity Jun 12 '10 at 10:33
It has its uses, but using an external stylesheet tends to be more maintainable and DRY. Reference: http://stackoverflow.com/questions/1127927/is-using-the-style-attribute-frowned-upon – Awgy Jun 12 '10 at 11:24
Sass/scss filter would be useful for example to have 404, 422 and 500 as pages with separate layout and caching turned on, so on deploy you just request pages somehow to get static html files. I just don't like to write plain css. – tig Apr 18 '11 at 13:02
1

My use case: some basic styles should be editable by site admins during runtime. I store a bunch of variables in the database and all styles that use those variables go into a haml partial. – Ivan Denysov Dec 15 '17 at 11:19

sam · Answer 2 · 2015-04-12T19:28:57.410

11

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! ;)

edited Apr 12 '15 at 19:28

answered Nov 02 '12 at 02:27

sam

40,318
2
41
37

score 2 · Answer 3 · answered Jul 23 '11 at 02:28

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

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

3 Answers3