Haml syntax: split a line to a couple of rows

Question

I use HAML in my rails project for my html templates. I would like to figure out if its possible to divide a very long line and make it a couple of rows:

%a.         


        

Answer 1

You can always break your line after commas. So if you had this:

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]).filter_by_appliance(params[:appliance]).where('start > ?', Time.now - 1.month).group_by_day(:start, format: '%d').sum(:power), colors: ["#7FC564"], title: 'Últimos 30 dias', library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' }, hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 }, vAxis: { textPosition: 'left', format: '# kWh' } }

You could, firstly, break lines on every comma to get into this:

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]).filter_by_appliance(params[:appliance]).where('start > ?', Time.now - 1.month).group_by_day(:start, format: '%d').sum(:power),
      colors: ["#7FC564"],
      title: 'Últimos 30 dias',
      library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' },
      hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 },
      vAxis: { textPosition: 'left', format: '# kWh' } |

Still, the first line is too big! No problem. The pipe character can designate a multiline string.

It’s placed at the end of a line (after some whitespace) and means that all following lines that end with | will be evaluated as though they were on the same line. So you'd finally get:

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]) |
      .filter_by_appliance(params[:appliance]) |
      .where('start > ?', Time.now - 1.month) |
      .group_by_day(:start, format: '%d') |
      .sum(:power), |
      colors: ["#7FC456"],
      title: 'Últimos 30 dias',
      library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' },
      hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 },
      vAxis: { textPosition: 'left', format: '# kWh' } |

Note that even the last line in the multiline block should end with |.

Hope it helps!