Generated by SassMeister.com.

SassMeister-input.scss

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

@mixin responsive($bp) {
  @if $bp == 'small' {
    @media only screen and (min-width: 24em) {
      @content;
    }
  }
  @if $bp == 'medium' {
    @media only screen and (min-width: 30em) {
      @content;
    }
  }
}

/** using classes **/
.headerPrimary {
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.25em;
  @include responsive('small') {
    font-size: 60px;
  }
  @include responsive('medium') {
    font-size: 70px;
    margin-bottom: 5em;
  }
}
 
.title {
  @extend .headerPrimary;
  color: #ff0000;
}
.title-other {
  @extend .headerPrimary;
  color: #ffcc00;
}
.somewhere {
  .headerPrimary {
    padding: 20px;
  }
}

/** using silent classes **/
%headerPrimary {
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.25em;
  @include responsive('small') {
    font-size: 60px;
  }
  @include responsive('medium') {
    font-size: 70px;
    margin-bottom: 5em;
  }
}
 
.silent-title {
  @extend %headerPrimary;
  color: #ff0000;
}
.silent-title-other {
  @extend %headerPrimary;
  color: #ffcc00;
}
.somewhere {
  %headerPrimary {
    padding: 20px;
  }
}

/** using mixins **/
@mixin headerPrimary {
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.25em;
  @include responsive('small') {
    font-size: 60px;
  }
  @include responsive('medium') {
    font-size: 70px;
    margin-bottom: 5em;
  }
  @content;
}
 
.mixin-title {
  @include headerPrimary {
    color: #ffcc00;
  }
}
.mixin-title-other {
  @include headerPrimary {
    color: #ffcc00;
  }
}
.somewhere {
  @include headerPrimary {
    padding: 20px;
  }
}

SassMeister-output.css

/** using classes **/
.headerPrimary, .title, .title-other {
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.25em;
}
@media only screen and (min-width: 24em) {
  .headerPrimary, .title, .title-other {
    font-size: 60px;
  }
}
@media only screen and (min-width: 30em) {
  .headerPrimary, .title, .title-other {
    font-size: 70px;
    margin-bottom: 5em;
  }
}

.title {
  color: #ff0000;
}

.title-other {
  color: #ffcc00;
}

.somewhere .headerPrimary, .somewhere .title, .somewhere .title-other {
  padding: 20px;
}

/** using silent classes **/
.silent-title, .silent-title-other {
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.25em;
}
@media only screen and (min-width: 24em) {
  .silent-title, .silent-title-other {
    font-size: 60px;
  }
}
@media only screen and (min-width: 30em) {
  .silent-title, .silent-title-other {
    font-size: 70px;
    margin-bottom: 5em;
  }
}

.silent-title {
  color: #ff0000;
}

.silent-title-other {
  color: #ffcc00;
}

.somewhere .silent-title, .somewhere .silent-title-other {
  padding: 20px;
}

/** using mixins **/
.mixin-title {
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.25em;
  color: #ffcc00;
}
@media only screen and (min-width: 24em) {
  .mixin-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 30em) {
  .mixin-title {
    font-size: 70px;
    margin-bottom: 5em;
  }
}

.mixin-title-other {
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.25em;
  color: #ffcc00;
}
@media only screen and (min-width: 24em) {
  .mixin-title-other {
    font-size: 60px;
  }
}
@media only screen and (min-width: 30em) {
  .mixin-title-other {
    font-size: 70px;
    margin-bottom: 5em;
  }
}

.somewhere {
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.25em;
  padding: 20px;
}
@media only screen and (min-width: 24em) {
  .somewhere {
    font-size: 60px;
  }
}
@media only screen and (min-width: 30em) {
  .somewhere {
    font-size: 70px;
    margin-bottom: 5em;
  }
}