Generated by SassMeister.com.

SassMeister-input-HTML.haml

#nav
  %h1 Netguru front-end rekru
  
#users{ style: "background: #f00" }
  %a{ href: 'http://sample.com/czajkovsky' }
    #user.id_13
      .user__id 13
      .user__name Mateusz Czajka
  %a{ href: 'http://sample.com/olabee' }
    #user.id_14
      .user__id 14
      .user__name Aleksandra Pszczoła
      
#footer
  %h1 Good luck!

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

body {
  #users {
    a {
      #user {
        .user__id {
          color: #f00;
        }
        .user__name {
          color: #0f0 !important;
        }
      }
    }
  }
}

@media (max-width: 20rem) {
  .hidden-xs {
    display: none !important;
  }
}

nav#nav {
  background: #f00;
}

SassMeister-output.css

body #users a #user .user__id {
  color: #f00;
}
body #users a #user .user__name {
  color: #0f0 !important;
}

@media (max-width: 20rem) {
  .hidden-xs {
    display: none !important;
  }
}
nav#nav {
  background: #f00;
}

SassMeister-rendered.html

<div id='nav'>
  <h1>Netguru front-end rekru</h1>
</div>
<div id='users' style='background: #f00'>
  <a href='http://sample.com/czajkovsky'>
    <div class='id_13' id='user'>
      <div class='user__id'>13</div>
      <div class='user__name'>Mateusz Czajka</div>
    </div>
  </a>
  <a href='http://sample.com/olabee'>
    <div class='id_14' id='user'>
      <div class='user__id'>14</div>
      <div class='user__name'>Aleksandra Pszczoła</div>
    </div>
  </a>
</div>
<div id='footer'>
  <h1>Good luck!</h1>
</div>