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

问题描述：

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等中使用。

这可能吗？

如果你想被应用为孩子完全相同的百分比值，[止跌't'padding：inherit' on the child]（https://www.w3.org/TR/CSS2/cascade.html#value-def-inherit）就够了吗？ – Harry

@哈里它主要用于填充，是的，但我打算将它与另一个属性一起使用。例如，“left”或“border-width”。它可以实现吗？ – deathlock

正如你可以在[这个小提琴]（https://jsfiddle.net/sh1o4kkg/）中看到的，继承可以用于很多属性。所以有可能你没有Sass本身就可以做到这一点，但是我没有一个完整的属性列表，这个列表可以肯定地工作，所以你必须尝试看看它是否适用于你拥有的道具心神。 – Harry

答

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

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

跟踪代码flex-gutter($container-columns);
$container-columns由此产生@function:
线55：$container-columns: container-span($span);

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

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

相关推荐