title: Using n inside calc
body: <p>can I use the n variable inside a calc expression?</p>
  
  <p>For example:</p>
  
  <pre><code>.child:nth-child(n) {
     margin-left: calc(n * 46px);
  }
  </code></pre>
  
  <p>My Code:</p>
  
  <pre><code>&lt;div class="share-buttons"&gt;
    &lt;div class="share-button-main"&gt;&lt;/div&gt;
    &lt;div class="share-button share-facebook"&gt;
      &lt;img src="facebook.png" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="share-button share-whatsapp"&gt;
      &lt;img src="whatsapp.png" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="share-button share-email"&gt;
      &lt;img src="email.png" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="share-button share-sms"&gt;
      &lt;img src="sms.png" alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS (Sass):</p>
  
  <pre><code>.share-buttons {
    position: relative;
      display: flex;
  
    .share-button-main {
      width: 46px;
      height: 46px;
      z-index: 2;
      cursor: pointer;
      content: url('share-menu-share-closed.png')
    }
  
    .share-button {
      position: absolute;
      top: 0;
      left: 0;
      width: 46px;
      height: 46px;
      z-index: 1;
      transition: all .3s ease;
      opacity: 0;
    }
  
    &amp;.open {
      .share-button-main {
        content: url('share-menu-share-opened.png')
      }
      .share-button {
        opacity: 1;
      }
  
      .share-facebook {
        left: 56px;
      }
  
      .share-whatsapp {
        left: 112px;
      }
  
      .share-email {
        left: 168px;
      }
  
      .share-sms {
        left: 224px;
      }
    }
  
      img {
          width: 46px;
          height: 46px;
      }
  }
  </code></pre>
  
  <p>Javascript (JQuery):</p>
  
  <pre><code>$('.share-button-main').click(function() {
    $('.share-buttons').toggleClass('open');
  });
  </code></pre>
  
  <p>I'm basically trying to acheive a dynamic opening effect to the menu so if I add or remove elements it'll still work (and not like now when I set each div's left separately).</p>