#output 0

.item
  .item-top
  .item-center
  .item-bottom

#output {
  font-weight: 700;
  font-family: sans-serif;
  font-size: 40px;
  color: red;
}

.item {
  max-width: 300px;
  margin: 20px auto;
  background: #e6e6e6;
  
  > div {
    margin-bottom: 20px;
    min-height: 40px;
  }
  
  &-top {
    background: green;
  }
  &-center {
    background: yellow;
  }
  &-bottom {
    background: red;
  }
  
}

var i = 0;
$('.item').on('mouseover',function(){
  i++;
  $('#output').html(i);
})