title: Using the same values with different classes in different @media without duplicating
body: <p>I have CSS like that:</p>
  
  <pre class="lang-css prettyprint-override"><code>.class1 {
    display: block;
    color: red;
  }
  
  .class2 {
    display: block;
    color: blue
  }
  
  @media(max-width:800px) {
    .class1-mobile {
      display: block;
      color: red;
    }
    .class2-mobile {
      display: block;
      color: blue
    }
  }
  
  @media(min-width:800px) {
    .class1-desktop {
      display: block;
      color: red;
    }
    .class2-desktop {
      display: block;
      color: blue
    }
  }
  </code></pre>
  
  <p>All the properties and their values are the same and the only difference is in class names and media queries. So I'd like to know if there is a way not to duplicate them.</p>