Cacher is the code snippet organizer for pro developers

<div class="city city--dot1"></div>
<div class="city city--dot2"></div>

.city {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background: red;
}
.city--dot1 {
  background: blue;
  width: 6px;
  height: 6px;
}
.city--dot2 {
  background: red;
}

.city--dot1 {
  top: 10px;
  left: 10px;
}

.city--dot2 {
  top: 10px;
  left: 20px;
}

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

.city {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  
  background: red;
  
  &--dot1 {
    background: blue;
    width: 6px;
    height: 6px;
  }
    &--dot2 {
    background: red;
  }
}

.city--dot1{ top: 10px;left: 10px;}
.city--dot2{ top: 10px;left: 20px;}

<div class="city city--dot1"></div>
<div class="city city--dot2"></div>