將父母的財產中的價值變爲可變，所以兒童的其他財產可以使用

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));