Question

Someone asked similarly before，但我的情况有点不同。我想使用Bourbon的span-columns mixin。此span-columns生成特定数量的padding。我想将该数字作为变量，然后将其传递给子元素。

因此，孩子的任何财产都可以使用$get-from-parent。

这是我的SASS

.grandparent {
    @include outer-container(100%);

    .parent {
        @include span-columns(4);
        @include omega(2);
        margin-bottom: 30px;
        @include pad (default);
        height: 500px;
        overflow: hidden;
        position: relative; z-index:2;
    }

    .child {
        padding: $get-from-parent; /* it can be anything, not just padding */
    }

其结果是CSS，

.grandparent {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.grandparent .parent {
    float: left;
    display: block;
    margin-right: 2.3576515979%;
    width: 31.7615656014%;
    margin-bottom: 30px;
    padding: 2.3576515979%;
}

记住奇数 2.3576515979％的数字。当我更改span-columns中的数字时，这会发生变化。我想将该数字作为$get-from-parent变量。然后在margin-bottom: $get-from-parent，border-width: $get-from-parent等

中使用它

有可能吗？

Answer 1

我认为您可以通过其源代码尝试解决它： https://github.com/thoughtbot/neat/blob/master/app/assets/stylesheets/grid/_span-columns.scss

跟踪代码：

此margin生成@function属性：
第86行：flex-gutter($container-columns);
$container-columns由此@function:生成第55行：$container-columns: container-span($span);

通过使用这两个@function，您的变量可能是这样的：
$get-from-parent: flex-gutter(container-span(4));

在父母身上创造价值＆＃39; property作为变量，因此它可以被子项中的其他属性使用

1 个答案: