gistfile1.scss

// How I have to do it

@mixin image {

    background: #ccc;
    margin: 0 0 1.5em;
    padding-top: 4px;

    p {
        color: #666;
        font-style: italic;
        font-size: 12px;
        font-size: 1.2rem;
        line-height: 15px;
        line-height: 1.5rem;
        margin-bottom: 0;
    }

}

@if $typography_component {

  // Lots of CSS defining a typographic style

  .image {

    @include image;

  }

  .imageStretch {
      
    @include image;

    img {
      display: block;
      width: 100%;
    }
      
  }

  .imageCenter {

    @include image;

    clear: both;
    text-align: center;

    img {
      display: inline;
    }

  }

  .imageLeft, .imageRight {

    @include image;

    width: 100%;

    img {
      width: 100%;
    }

  }

  @include respondMinMax(640px, false) {
    .imageLeft {

      @include image;

      float: left;
      margin: 0 15px 5px 0;
      margin: 0 1.5rem 0.5rem 0;
      width: 50%;
    }

    .imageRight {

      @include image;

      float: right;
      margin: 0 0 5px 15px;
      margin: 0 0 0.5em 1.5rem;
      width: 50%;
    }

  }

}

// How I'd like to do it
// This keeps the mixin closer to where its used.

@if $typography_component {

  // Lots of CSS defining a typographic style

  @mixin image {

    background: #ccc;
    margin: 0 0 1.5em;
    padding-top: 4px;

    p {
        color: #666;
        font-style: italic;
        font-size: 12px;
        font-size: 1.2rem;
        line-height: 15px;
        line-height: 1.5rem;
        margin-bottom: 0;
    }

  }

  .image {

    @include image;

  }

  .imageStretch {
      
    @include image;

    img {
      display: block;
      width: 100%;
    }
      
  }

  .imageCenter {

    @include image;

    clear: both;
    text-align: center;

    img {
      display: inline;
    }

  }

  .imageLeft, .imageRight {

    @include image;

    width: 100%;

    img {
      width: 100%;
    }

  }

  @include respondMinMax(640px, false) {
    .imageLeft {

      @include image;

      float: left;
      margin: 0 15px 5px 0;
      margin: 0 1.5rem 0.5rem 0;
      width: 50%;
    }

    .imageRight {

      @include image;

      float: right;
      margin: 0 0 5px 15px;
      margin: 0 0 0.5em 1.5rem;
      width: 50%;
    }

  }

}