：延伸（）中嵌套塊

Question

此代碼：

.first { 
    margin: 19px; 

    .nested { 
     color: white; 
    } 
} 

.second:extend(.first) { 
} 

輸出：

.first, 
.second { 
    margin: 19px; 
} 
.first .nested { 
    color: white; 
} 

但是，如果你把它包裝在另一個塊：

div { 
    .first { 
     margin: 19px; 

     .nested { 
      color: white; 
     } 
    } 

    .second:extend(.first) { 
    } 
} 

輸出：

div .first { 
    margin: 19px; 
} 
div .first .nested { 
    color: white; 
} 

無視延長？這是一個錯誤？

Answer 1

從上面的comment通過@seven-phases-max

不，這不是一個錯誤。 :extend與它使用的選擇器不相關;它總是需要一個完整的（「絕對」）選擇器「路徑」。即無論.second本身位於何處，它應該是.second:extend(div .first)。

div { 
    .first { 
     margin: 19px; 

     .nested { 
      color: white; 
     } 
    } 
    .second:extend(div .first) {} 
}