title: Define one single background size on SASS class
body: <p>So I have the following code:</p>
  <pre><code>.has-background-graphic
    &amp;-is-25
      background-image: linear-gradient(to right, whitesmoke 25%, transparent), url('/liuzishan/liuzishan1612/liuzishan161200017/66848202-abstract-graphic-design-a-sense-of-science-and-technology-background-.jpg')
      background-size: cover
      background-position: center
    &amp;-is-50
      background-image: linear-gradient(to right, whitesmoke 50%, transparent), url('/uploads/meta/internal-media-file/2020/techlash-2020-1600345019.jpg')
      background-size: cover
      background-position: center
    &amp;-is-75
      background-image: linear-gradient(to right, whitesmoke 75%, transparent), url('/uploads/meta/internal-media-file/2020/tgi-covid-19-study-wave-2-1595432491.jpg')
      background-size: cover
      background-position: center
  </code></pre>
  <p>With <code>SASS</code>, is it possible to define <code>background-size</code> and <code>background-position</code> without me having to repeat myself in very <code>-</code> extension?</p>
  <p>Please note, I don't have <code>has-background-graphic</code> define anywhere, but I do have the following defined:</p>
  <ul>
  <li><code>has-background-graphic-is-25</code></li>
  <li><code>has-background-graphic-is-50</code></li>
  <li><code>has-background-graphic-is-75</code></li>
  </ul>
  <p>All help would be appreciated!</p>