21

can I use the n variable inside a calc expression?

For example:

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

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

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).

dippas
  • 58,591
  • 15
  • 114
  • 126
Naxon
  • 1,354
  • 4
  • 20
  • 40
  • well if you're using sass already why not create a mixin or function for this? – MMachinegun Jul 27 '16 at 15:27
  • Absolute positioning is a **very** poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out [**LearnLayout.com**](http://learnlayout.com/) – Paulie_D Jul 27 '16 at 15:27
  • 1
    Seems to me all you are asking is to have these elements in a row...you don't need positioning for that. – Paulie_D Jul 27 '16 at 15:30

3 Answers3

5

Not exactly what you may be after, but you can achieve a similar effect with scss if you know the number of elements. Just bear in mind that this will generate a lot of css:

@for $i from 1 through 7 {
    &:nth-child(#{$i}) {
      margin-left: calc(#{$i} * 46px);
    }
  }
David
  • 15,652
  • 26
  • 115
  • 156
4

No; you can't do that.

The counter feature can almost do that, except that it can't be used with calc() either.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • So is there any way I can do such thing? give an element left-margin based on it's previous sibling left-margin? – Naxon Jul 27 '16 at 15:18
3

You can't, as mentioned by @SLaks. But this can be solved by placing each next element inside the previous one.

See with divs:

div {
  margin-left: 46px
}
<div>test
  <div>test
    <div>test
      <div>test</div>
    </div>
  </div>
</div>

Or, use 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>
nicael
  • 18,550
  • 13
  • 57
  • 90