L'utilisation de n à l'intérieur de calc

Question

Puis-je utiliser la variable n dans une expression calc?

Par exemple:

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

Mon code:

<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'); 
}); 

J'essaie fondamentalement d'obtenir un effet d'ouverture dynamique sur le menu, donc si j'ajoute ou supprime des éléments, ça fonctionnera toujours (et pas comme maintenant quand je place chaque div séparément).

Answer 1

Vous ne pouvez pas, comme mentionné par @ SLaks. Mais cela peut être résolu en plaçant chaque élément suivant dans le précédent.

Voir avec divs:

div { 
 
    margin-left: 46px 
 
}

<div>test 
 
    <div>test 
 
    <div>test 
 
     <div>test</div> 
 
    </div> 
 
    </div> 
 
</div>

Ou, utilisez jQuery.

var margin=0; 
 
$("div").each(function(){ 
 
    $(this).css("margin-left",margin+=46) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>text</div> 
 
<div>text</div> 
 
<div>text</div> 
 
<div>text</div> 
 
<div>text</div>

Answer 2

Non; tu ne peux pas faire ça.

La fonctionnalité counter peut presque faire cela, sauf qu'il ne peut pas être utilisé avec calc() non plus.