title: SASS multiple classes share same and different css
body: <p>i have 3 html elements</p>
  
  <pre><code>&lt;div id="top-bg-animate-0"&gt;&lt;/div&gt;           
  &lt;div id="top-bg-animate-1"&gt;&lt;/div&gt;
  &lt;div id="top-bg-animate-2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>both have same css</p>
  
  <pre><code> #top-bg-animate-0,
   #top-bg-animate-1,
   #top-bg-animate-2 {
      position:absolute;
      top:0; left:0;
      width:100%;
      bottom:-50%;
      display:block;
      background-size:cover;
      background-position:top left;
      background-repeat:no-repeat;
      opacity:0;
  }
  </code></pre>
  
  <p>and unique css too </p>
  
  <pre><code>    #top-bg-animate-0 {
      background-image:url(../images/level3.png);
      transform:translateY(-20%);
      -webkit-transform:translateY(-20%);
      transition:opacity 1s, visibility 1s, transform 10s;
      -webkit-transition:opacity 1s, visibility 1s, transform 10s;
  }
      #top-bg-animate-1{
      background-image:url(../images/level2.png);
      transform:translateY(-30%);
      -webkit-transform:translateY(-30%);
      transition:opacity 1s, visibility 1s, transform 9s;
      -webkit-transition:opacity 1s, visibility 1s, transform 9s;
  }
     #top-bg-animate-2 {
      background-image:url(../images/level1.png);
      transform:translateY(-30%);
      -webkit-transform:translateY(-30%);
      transition:opacity 1s, visibility 1s, transform 6s;
      -webkit-transition:opacity 1s, visibility 1s, transform 6s;
  }
  </code></pre>
  
  <p>i want to write this in SAAS way maybe <code>mixins</code> will help me it in but i also don't know how to nest classes like <code>class1,class2,class3</code> I'm stuck help me out !</p>