Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="blog not-blog">
  Hello
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

.comButton {
  content: "Some shit goes here";
}

.comButton-green {
  background-color: green;
  
  &:hover {
    background-color: lighten(green, 10%);
  }
}

.comButton-red {
  background-color: red;
  
  &:hover {
    background-color: lighten(red, 10%);
  }
}

// At this point we are fine.

.viewMainBox {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

.viewCreateRepoForm {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

.viewChangePasswordPrompt {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

.viewDeleteRepoPrompt {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

.viewDeleteRepoPrompt2 {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

.viewDeleteRepoPrompt3 {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

.viewDeleteRepoPrompt4 {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

.viewDeleteRepoPrompt5 {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}


.viewDeleteRepoPrompt6 {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

.viewDeleteRepoPrompt7 {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

.viewDeleteRepoPrompt8 {
  .cancelButton {
    @extend .comButton-red;
  }
  .submitButton {
    @extend .comButton-green;
  }
}

SassMeister-output.css

.comButton {
  content: "Some shit goes here";
}

.comButton-green, .viewMainBox .submitButton, .viewCreateRepoForm .submitButton, .viewChangePasswordPrompt .submitButton, .viewDeleteRepoPrompt .submitButton, .viewDeleteRepoPrompt2 .submitButton, .viewDeleteRepoPrompt3 .submitButton, .viewDeleteRepoPrompt4 .submitButton, .viewDeleteRepoPrompt5 .submitButton, .viewDeleteRepoPrompt6 .submitButton, .viewDeleteRepoPrompt7 .submitButton, .viewDeleteRepoPrompt8 .submitButton {
  background-color: green;
}
.comButton-green:hover, .viewMainBox .submitButton:hover, .viewCreateRepoForm .submitButton:hover, .viewChangePasswordPrompt .submitButton:hover, .viewDeleteRepoPrompt .submitButton:hover, .viewDeleteRepoPrompt2 .submitButton:hover, .viewDeleteRepoPrompt3 .submitButton:hover, .viewDeleteRepoPrompt4 .submitButton:hover, .viewDeleteRepoPrompt5 .submitButton:hover, .viewDeleteRepoPrompt6 .submitButton:hover, .viewDeleteRepoPrompt7 .submitButton:hover, .viewDeleteRepoPrompt8 .submitButton:hover {
  background-color: #00b300;
}

.comButton-red, .viewMainBox .cancelButton, .viewCreateRepoForm .cancelButton, .viewChangePasswordPrompt .cancelButton, .viewDeleteRepoPrompt .cancelButton, .viewDeleteRepoPrompt2 .cancelButton, .viewDeleteRepoPrompt3 .cancelButton, .viewDeleteRepoPrompt4 .cancelButton, .viewDeleteRepoPrompt5 .cancelButton, .viewDeleteRepoPrompt6 .cancelButton, .viewDeleteRepoPrompt7 .cancelButton, .viewDeleteRepoPrompt8 .cancelButton {
  background-color: red;
}
.comButton-red:hover, .viewMainBox .cancelButton:hover, .viewCreateRepoForm .cancelButton:hover, .viewChangePasswordPrompt .cancelButton:hover, .viewDeleteRepoPrompt .cancelButton:hover, .viewDeleteRepoPrompt2 .cancelButton:hover, .viewDeleteRepoPrompt3 .cancelButton:hover, .viewDeleteRepoPrompt4 .cancelButton:hover, .viewDeleteRepoPrompt5 .cancelButton:hover, .viewDeleteRepoPrompt6 .cancelButton:hover, .viewDeleteRepoPrompt7 .cancelButton:hover, .viewDeleteRepoPrompt8 .cancelButton:hover {
  background-color: #ff3333;
}

SassMeister-rendered.html

<div class="blog not-blog">
  Hello
</div>