Cacher is the code snippet organizer for pro developers

.dev-diagram
    - steps.each_with_index do |step, index|
        - if index.even?
            - step_class = 'dev-diagram__step dev-diagram__step_right'
        - else
            - step_class = 'dev-diagram__step dev-diagram__step_left'

        div( class=step_class )
            .dev-diagram__ic
                ins( class="ic-big_#{step[:ic_name]}" )
            a.dev-diagram__title( href=step[:url] )
                = step[:name]
            p.dev-diagram__descr
                = step[:description]
            span.dev-diagram__progress
                span.dev-diagram__progress-dot
                span.dev-diagram__progress-line

.dev-diagram
    - steps.each_with_index do |step, index|
        - if index.even?
            - step_class = 'dev-diagram__step dev-diagram__step_right'
        - else
            - step_class = 'dev-diagram__step dev-diagram__step_left'

        %div{class=step_class}
            .dev-diagram__ic
                %ins{class="ic-big_#{step[:ic_name]}"}
            %a.dev-diagram__title{href=step[:url]}
                = step[:name]
            %p.dev-diagram__descr
                = step[:description]
            %span.dev-diagram__progress
                %span.dev-diagram__progress-dot
                %span.dev-diagram__progress-line

<div class="dev-diagram">
    <% steps.each_with_index do |step, index| %>
        <% if index.even? %>
            <% step_class = 'dev-diagram__step dev-diagram__step_right' %>
        <% else %>
            <% step_class = 'dev-diagram__step dev-diagram__step_left' %>
        <% end %>

        <div class="#{step_class}">
            <div class="dev-diagram__ic">
                <ins class="ic-big_#{step[:ic_name]}"></ins>
            </div>
            <a class="dev-diagram__title" href="#{step[:url]}"><%= step[:name] %></a>
            <p class="dev-diagram__descr"><%= step[:description] %></p>
            <span class="dev-diagram__progress">
                <span class="dev-diagram__progress-dot">
                <span class="dev-diagram__progress-line">
            </span>
        </div>
    <% end %>
</div>