使用父母的財產作爲SASS變量

Question

是否可以使用父母的屬性作爲變量？ 例如在這段代碼中，我希望能夠給'inner-box'元素賦予與其父'box'相同的顏色。

讓它像.inner盒{背景色：$外Parent's色;}

Example on Fiddle

<div class="box"> 
    <div class="box1"> 
     <div class = "inner-box"> 
      BOX 
     </div> 
    </div> 
</div> 

<div class="box red"> 
    <div class="box1"> 
     <div class = "inner-box"> 
      RED BOX 
     </div> 
    </div> 
</div> 

和CSS

.box { 
    width: 100px; 
    padding: 10px; 
    margin: 10px; 
    background-color: blue; 
} 
.box1 { 
    background-color: darkblue; 
    padding: 10px; 
} 
.box.red { 
    background-color: red; 
} 
.box.red .box1 { 
    background-color: darkred; 
} 
.inner-box { 
    background-color: $Outer-Parent's-Color; 
} 

Answer 1

如果你正在使用SASS，你可以在盒子內嵌入內盒

.box {  
    width: 100px; 
    padding: 10px; 
    margin: 10px; 
    background-color: blue; 

    &.inner-box { 
     background-color: inherit; 
    } 
} 

Answer 2

使用時只需將繼承價值：

.inner-box { 
     background-color: inherit; 
    } 

Answer 3

@Thomas木材和@Oliver Benns：不與父母繼承工作？在我看來，我們處理祖父母和孩子。所以，沒有什麼花哨只是簡單的CSS增加一個選擇：

.box { 
    width: 100px; 
    padding: 10px; 
    margin: 10px; 
} 
.box, .box div div /* Selects the grandparent and child and is not a fancy sass nested selector */ 
    background-color: blue; 
} 

或者花哨青菜@mixin和@for和計算顏色值：

@mixin grandparent($h, $width: 200px) { 
    width: $width; 
    background-color: hsl(20 * $h, 100%, 50%); 
} 

@mixin child($h) { 
    background-color: hsl(20 * $h, 100%, 50%); 
} 

@for $i from 1 through 6 { 
    .box-#{$i} { @include grandparent($i, 20 * $i); } 
    .box-#{$i} div div { @include child($i); } 
} 

的