在calc中使用n

Question

我能在计算表达式中使用变量n吗？

例如：

.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单独设置左侧位置）。

- Naxon

---

如果你已经在使用Sass，为什么不为此创建一个mixin或函数呢？ - MMachinegun

绝对定位是一种非常糟糕的网页布局方法。它非常不灵活，而且有更好、更具响应性的选项。请查看LearnLayout.com。 - Paulie_D

看起来你所要求的只是将这些元素放在一行中...那并不需要定位。 - Paulie_D

Answer 1

也许不是您想要的方法，但如果您知道元素数量，可以使用scss实现类似的效果。请注意，这将会生成大量的css：

@for $i from 1 through 7 {
    &:nth-child(#{$i}) {
      margin-left: calc(#{$i} * 46px);
    }
  }

- David

Answer 2

不可以，你无法这样做。

counter 功能几乎可以实现此功能，但是它也不能与 calc() 一起使用。

- SLaks

---

那么我有没有办法做到这样的事情呢？根据前一个兄弟元素的左边距为元素设置左边距？ - Naxon

Answer 3

如@SLaks所述，您不能这样做。但是可以通过将每个下一个元素放置在前一个元素内来解决此问题。

使用divs如下：

div {
  margin-left: 46px
}

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

或者，使用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

---

我的实际元素是绝对定位的div。 - Naxon

@Daniel 添加了另一个解决方案。 - nicael