я могу использовать переменную n внутри выражения calc?

Например:

.child:nth-child(n) {
   margin-left: calc(n * 46px);
}

Мой код:

<div class="share-buttons">
  <div class="share-button-main"></div>
  <div class="share-button share-facebook">
    <img src="facebook.png" alt="" />
  </div>
  <div class="share-button share-whatsapp">
    <img src="whatsapp.png" alt="" />
  </div>
  <div class="share-button share-email">
    <img src="email.png" alt="" />
  </div>
  <div class="share-button share-sms">
    <img src="sms.png" alt="" />
  </div>
</div>

CSS (Sass):

.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;
  }

  &.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;
    }
}

Javascript (JQuery):

$('.share-button-main').click(function() {
  $('.share-buttons').toggleClass('open');
});

Я в основном пытаюсь добиться динамического эффекта открытия меню, так что, если я добавлю или уберу элементы, оно все равно будет работать (и не так, как сейчас, когда я устанавливаю левую часть каждого элемента div отдельно).