Generated by SassMeister.com.

SassMeister-input-HTML.haml

- filters = {
-   city: { title: 'City',
      values: {
-       sea: 'Seattle',
        chi: 'Chicago',
        pdx: 'Portland' }
-   },
    stack: { title: 'Stacks',
      values: {
-       js:     'JavaScript',
        ruby:   'Ruby on Rails',
        python: 'Python',
        ios:    'iOS Development',
        ux:     'Web UI Development' }
-   },
    quarter: { title: 'Start Date',
      values: {
-       q1: 'Winter',
        q2: 'Spring',
        q3: 'Summer',
        q4: 'Fall' }
-   },
    experience: { title: 'Experience Level',
      values: {
-       exp1: 'Beginner',
        exp2: 'Intermediate',
        exp3: 'Advanced' }
-   },
    format: { title: 'Format',
      values: {
-       full: 'Full Time',
        part: 'Part Time' }
-   }
- }


#filter
  %h1 Filter By

  %section
    - filters.each do |filter, data|
      %h2= data[:title]

      %section
        - data[:values].each do |key, value|
          %input{id: "#{filter}_#{key}", type: 'checkbox', value: key, checked: true}
          %label{for: "#{filter}_#{key}"}
            = value

        %input{id: "#{filter}_all", type: 'checkbox', checked: true}
        %label{for: "#{filter}_all"}
          All


- filters[:city][:values].each do |city_code, city_name|
  - i=0

  - filters[:quarter][:values].first(2).each do |quarter_code, quarter_name|
    - filters[:stack][:values].first(3).each do |stack_code, stack_name|
      %article{id: "#{city_code}-#{i += 1}", class: stack_code}
        %header
          %h1= stack_name
          %h2= quarter_name
          %h2= city_name

SassMeister-input.sass

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

body
  text-align: left
  
label
  display: block
  
  &:before
    content: ''
    display: inline-block
    width: 1em
    height: 1em
    border: 1px solid #333
    background: #fff
    border-radius: 0.25em
    
    input:checked + &
      background: #333
  
    
  
input
  display: none

SassMeister-output.css

body {
  text-align: left;
}

label {
  display: block;
}
label:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 1px solid #333;
  background: #fff;
  border-radius: 0.25em;
}
input:checked + label:before {
  background: #333;
}

input {
  display: none;
}

SassMeister-rendered.html

<div id='filter'>
  <h1>Filter By</h1>
  <section>
    <h2>City</h2>
    <section>
      <input checked id='city_sea' type='checkbox' value='sea'>
      <label for='city_sea'>
        Seattle
      </label>
      <input checked id='city_chi' type='checkbox' value='chi'>
      <label for='city_chi'>
        Chicago
      </label>
      <input checked id='city_pdx' type='checkbox' value='pdx'>
      <label for='city_pdx'>
        Portland
      </label>
      <input checked id='city_all' type='checkbox'>
      <label for='city_all'>
        All
      </label>
    </section>
    <h2>Stacks</h2>
    <section>
      <input checked id='stack_js' type='checkbox' value='js'>
      <label for='stack_js'>
        JavaScript
      </label>
      <input checked id='stack_ruby' type='checkbox' value='ruby'>
      <label for='stack_ruby'>
        Ruby on Rails
      </label>
      <input checked id='stack_python' type='checkbox' value='python'>
      <label for='stack_python'>
        Python
      </label>
      <input checked id='stack_ios' type='checkbox' value='ios'>
      <label for='stack_ios'>
        iOS Development
      </label>
      <input checked id='stack_ux' type='checkbox' value='ux'>
      <label for='stack_ux'>
        Web UI Development
      </label>
      <input checked id='stack_all' type='checkbox'>
      <label for='stack_all'>
        All
      </label>
    </section>
    <h2>Start Date</h2>
    <section>
      <input checked id='quarter_q1' type='checkbox' value='q1'>
      <label for='quarter_q1'>
        Winter
      </label>
      <input checked id='quarter_q2' type='checkbox' value='q2'>
      <label for='quarter_q2'>
        Spring
      </label>
      <input checked id='quarter_q3' type='checkbox' value='q3'>
      <label for='quarter_q3'>
        Summer
      </label>
      <input checked id='quarter_q4' type='checkbox' value='q4'>
      <label for='quarter_q4'>
        Fall
      </label>
      <input checked id='quarter_all' type='checkbox'>
      <label for='quarter_all'>
        All
      </label>
    </section>
    <h2>Experience Level</h2>
    <section>
      <input checked id='experience_exp1' type='checkbox' value='exp1'>
      <label for='experience_exp1'>
        Beginner
      </label>
      <input checked id='experience_exp2' type='checkbox' value='exp2'>
      <label for='experience_exp2'>
        Intermediate
      </label>
      <input checked id='experience_exp3' type='checkbox' value='exp3'>
      <label for='experience_exp3'>
        Advanced
      </label>
      <input checked id='experience_all' type='checkbox'>
      <label for='experience_all'>
        All
      </label>
    </section>
    <h2>Format</h2>
    <section>
      <input checked id='format_full' type='checkbox' value='full'>
      <label for='format_full'>
        Full Time
      </label>
      <input checked id='format_part' type='checkbox' value='part'>
      <label for='format_part'>
        Part Time
      </label>
      <input checked id='format_all' type='checkbox'>
      <label for='format_all'>
        All
      </label>
    </section>
  </section>
</div>
<article class='js' id='sea-1'>
  <header>
    <h1>JavaScript</h1>
    <h2>Winter</h2>
    <h2>Seattle</h2>
  </header>
</article>
<article class='ruby' id='sea-2'>
  <header>
    <h1>Ruby on Rails</h1>
    <h2>Winter</h2>
    <h2>Seattle</h2>
  </header>
</article>
<article class='python' id='sea-3'>
  <header>
    <h1>Python</h1>
    <h2>Winter</h2>
    <h2>Seattle</h2>
  </header>
</article>
<article class='js' id='sea-4'>
  <header>
    <h1>JavaScript</h1>
    <h2>Spring</h2>
    <h2>Seattle</h2>
  </header>
</article>
<article class='ruby' id='sea-5'>
  <header>
    <h1>Ruby on Rails</h1>
    <h2>Spring</h2>
    <h2>Seattle</h2>
  </header>
</article>
<article class='python' id='sea-6'>
  <header>
    <h1>Python</h1>
    <h2>Spring</h2>
    <h2>Seattle</h2>
  </header>
</article>
<article class='js' id='chi-1'>
  <header>
    <h1>JavaScript</h1>
    <h2>Winter</h2>
    <h2>Chicago</h2>
  </header>
</article>
<article class='ruby' id='chi-2'>
  <header>
    <h1>Ruby on Rails</h1>
    <h2>Winter</h2>
    <h2>Chicago</h2>
  </header>
</article>
<article class='python' id='chi-3'>
  <header>
    <h1>Python</h1>
    <h2>Winter</h2>
    <h2>Chicago</h2>
  </header>
</article>
<article class='js' id='chi-4'>
  <header>
    <h1>JavaScript</h1>
    <h2>Spring</h2>
    <h2>Chicago</h2>
  </header>
</article>
<article class='ruby' id='chi-5'>
  <header>
    <h1>Ruby on Rails</h1>
    <h2>Spring</h2>
    <h2>Chicago</h2>
  </header>
</article>
<article class='python' id='chi-6'>
  <header>
    <h1>Python</h1>
    <h2>Spring</h2>
    <h2>Chicago</h2>
  </header>
</article>
<article class='js' id='pdx-1'>
  <header>
    <h1>JavaScript</h1>
    <h2>Winter</h2>
    <h2>Portland</h2>
  </header>
</article>
<article class='ruby' id='pdx-2'>
  <header>
    <h1>Ruby on Rails</h1>
    <h2>Winter</h2>
    <h2>Portland</h2>
  </header>
</article>
<article class='python' id='pdx-3'>
  <header>
    <h1>Python</h1>
    <h2>Winter</h2>
    <h2>Portland</h2>
  </header>
</article>
<article class='js' id='pdx-4'>
  <header>
    <h1>JavaScript</h1>
    <h2>Spring</h2>
    <h2>Portland</h2>
  </header>
</article>
<article class='ruby' id='pdx-5'>
  <header>
    <h1>Ruby on Rails</h1>
    <h2>Spring</h2>
    <h2>Portland</h2>
  </header>
</article>
<article class='python' id='pdx-6'>
  <header>
    <h1>Python</h1>
    <h2>Spring</h2>
    <h2>Portland</h2>
  </header>
</article>