将父母的财产中的价值变为可变，所以儿童的其他财产可以使用

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

我想你可以尝试算出它通过它的源代码：这个@function

1. 的margin属性是产生：
   线86： https://github.com/thoughtbot/neat/blob/master/app/assets/stylesheets/grid/_span-columns.scss

   跟踪代码flex-gutter($container-columns);

2. $container-columns由此产生@function:
   线55：$container-columns: container-span($span);

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