Generated by SassMeister.com.

SassMeister-input-HTML.jade

- var 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' } }, experience: { title: 'Experience Level', values: { exp1: 'Beginner', exp2: 'Intermediate', exp3: 'Advanced' } }, quarter: { title: 'Start Date', values: { q1: 'Winter', q2: 'Spring', q3: 'Summer', q4: 'Fall' } }, format: { title: 'Format', values: {full: 'Full Time', part: 'Part Time' } } };
 

#filters
  h1 Filter By

  section
    each data, filter  in filters
      h2= data.title

      section
        each value, key in data.values
          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

  each city_name, city_code in filters.city.values
   - var i = 0;
   
    each quarter_name, quarter_code in filters.quarter.values
      each stack_name, stack_code in filters.stack.values
        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="filters">
  <h1>Filter By</h1>
  <section>
    <h2>City</h2>
    <section>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Seattle</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Chicago</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Portland</label>
      <input id:="id:" #{filter}_all="#{filter}_all" type:="type:" checkbox="checkbox" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_all="#{filter}_all">All</label>
    </section>
    <h2>Stacks</h2>
    <section>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">JavaScript</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Ruby on Rails</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Python</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">iOS Development</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Web UI Development</label>
      <input id:="id:" #{filter}_all="#{filter}_all" type:="type:" checkbox="checkbox" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_all="#{filter}_all">All</label>
    </section>
    <h2>Experience Level</h2>
    <section>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Beginner</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Intermediate</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Advanced</label>
      <input id:="id:" #{filter}_all="#{filter}_all" type:="type:" checkbox="checkbox" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_all="#{filter}_all">All</label>
    </section>
    <h2>Start Date</h2>
    <section>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Winter</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Spring</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Summer</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Fall</label>
      <input id:="id:" #{filter}_all="#{filter}_all" type:="type:" checkbox="checkbox" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_all="#{filter}_all">All</label>
    </section>
    <h2>Format</h2>
    <section>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Full Time</label>
      <input id:="id:" #{filter}_#{key}="#{filter}_#{key}" type:="type:" checkbox="checkbox" value:="value:" key="key" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_#{key}="#{filter}_#{key}">Part Time</label>
      <input id:="id:" #{filter}_all="#{filter}_all" type:="type:" checkbox="checkbox" checked:="checked:" true="true"/>
      <label for:="for:" #{filter}_all="#{filter}_all">All</label>
    </section>
  </section>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Winter</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Winter</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Winter</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Winter</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Winter</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Spring</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Spring</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Spring</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Spring</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Spring</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Summer</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Summer</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Summer</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Summer</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Summer</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Fall</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Fall</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Fall</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Fall</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Fall</h2>
      <h2>Seattle</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Winter</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Winter</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Winter</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Winter</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Winter</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Spring</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Spring</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Spring</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Spring</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Spring</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Summer</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Summer</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Summer</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Summer</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Summer</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Fall</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Fall</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Fall</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Fall</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Fall</h2>
      <h2>Chicago</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Winter</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Winter</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Winter</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Winter</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Winter</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Spring</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Spring</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Spring</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Spring</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Spring</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Summer</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Summer</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Summer</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Summer</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Summer</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>JavaScript</h1>
      <h2>Fall</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Ruby on Rails</h1>
      <h2>Fall</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Python</h1>
      <h2>Fall</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>iOS Development</h1>
      <h2>Fall</h2>
      <h2>Portland</h2>
    </header>
  </article>
  <article id:="id:" #{city_code}-#{i += 1}="#{city_code}-#{i += 1}" class:="class:" stack_code="stack_code">
    <header>
      <h1>Web UI Development</h1>
      <h2>Fall</h2>
      <h2>Portland</h2>
    </header>
  </article>
</div>