title: SASS group elements for reuse
body: <p>I want to create a 'group' of elements that get certain colours/styles added to them based on the body class. </p>
  
  <p>I'm using SASS and don't want to have to write the same elements each time. </p>
  
  <p>I know the the code below is wrong but you get the idea.</p>
  
  <p>Is something like this possible?</p>
  
  <pre><code>@mixin coloured-elements {
      a:hover,
      a.site-title,
      .another-element
  }
  body.blue {
      @include coloured-elements {
          color: $blue;
      }
  }
  body.green {
      @include coloured-elements {
          color: $green;
      }
  }
  body.red {
      @include coloured-elements {
          color: $red;
      }
  }
  body.purple {
      @include coloured-elements {
          color: $purple;
      }
  }
  body.orange {
      @include coloured-elements {
          color: $orange;
      }
  }
  </code></pre>