将父属性中的值设置为变量，以便它可供子属性中的其他属性使用

Question

之前有人问过类似的问题，但我的情况有点不同。我想使用波旁威士忌的span-columns混合。这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

跟踪代码：

1. margin属性由以下@function生成：
   第 86 行：flex-gutter($container-columns);

2. $container-columns由此@function:
   生成第 55 行：$container-columns: container-span($span);

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