小编art*_*mov的帖子

所以我希望有人可以用一些看似简单的东西来帮助我.

我有一个网格模板,设置了广告,在不同的位置.导致代码结构有点复杂.基本上现在让我看起来恰到好处,我正在使用相当多的&n:子选择器来删除各个断点处的边距.

而不是我写出的东西,如:

&:nth-child( 3 ),
    &:nth-child( 10 ),
    &:nth-child( 13 ),
    &:nth-child( 17 ),
    &:nth-child( 20 ),
    &:nth-child( 23 ),
    &:nth-child( 26 ),
    &:nth-child( 30 ),
    &:nth-child( 33 ),
    &:nth-child( 37 ),
    &:nth-child( 43 ) {
        margin-right: $gutter-width;
    }

我一直试图创建一个混合,允许我传递一个整数数组和css吐出我上面显示的东西,通过调用的东西沿着

@include nth-children( 3, 10, 13, 17, 20...) {
    margin-right: $gutter-width;
}

唯一的问题是,我还需要能够将等式作为该列表的一部分(20n - 5)或任何情况下传递.

我尝试过一些东西,但似乎无法接近它

@mixin nth-children($nths) {

@for $i from 1 through length($nths) {
    &:nth-child(#{$i}) {
        @content;
    }
}

}

我想防止首先创建列表,因为值将在多种不同的屏幕尺寸和页面布局上不断变化.

我一直在努力弄清楚如何完成我认为很简单的事情（我知道......）

目标是创建一个非常小的、可重用的模态组件，我可以使用触发按钮或 w/e 在某种 HOC 中对其进行动画处理。

我正在使用 createPortal 创建它，目标是在进入/退出所述门户时添加一些简单的动画。

我已经使用 GSAP 让它工作了，但理想情况下，我希望它与 SC 一起使用，这样我就不必引入另一个动画库。

对于我的生活，我只是无法让它与 SC 一起工作，如果有人能指出我正确的方向，我会很高兴。

我在这里做了一个沙箱：https : //codesandbox.io/s/r44w9m4o5p使用 GSAP 来运行动画，它有点笨拙，但它是我想要的正确方向。

另外，使用 react-transition-group 比https://github.com/react-tools/react-move有什么好处吗？