奇怪SASS輸出擴展

Question

我有以下SASS文件

_android.scss：

$width: 111px; 
@import 'child'; 

.android .child { 
    @extend %child; 
} 

_ios.scss：

$width: 999px; 
@import 'child'; 

.ios .child { 
    @extend %child; 
} 

_child.scss：

%child { 
    width: $width; 
} 

app.scss：

@import 'ios'; 
@import 'android'; 

現在，當我運行青菜，我得到：

$> sass app.scss 
.ios .child, .android .child { 
    width: 999px; } 

.ios .child, .android .child { 
    width: 111px; } 

不是真的我的預期，這是

.ios .child { 
    width: 999px; 
} 

.android .child { 
    width: 111px; 
} 

這是什麼什麼，我錯在這裏做什麼？

Answer 1

這是因爲@extends是（@extends是有點貪心）處理，因爲它們是在薩斯首次發現，所有在其使用在這一點上組合在一起的選擇和你包括兩次@extends佔位符。

讓我們一步步通過會發生什麼：

1. ios.sass被加載，這臺$width，包括%child
2. 青菜遇到因爲包括佔位符，所以看起來通過代碼，得到的該佔位符的所有實例，將選擇器分組並使用當前的寬度值。
3. 下一個android.sass被加載，$width被設置爲一個新值並且%child被再次包括。
4. sass重複步驟2.每次遇到@extends時，它的所有實例都將被分組並使用佔位符中的值輸出。

這就是爲什麼當你看到輸出時，你看到兩個選擇器被分組，並且這個組重複兩次，每個$width定義的值。

該怎麼做才能解決它

一個mixin是最好的在這裏。當遇到混入時，會立即對其進行評估，並將結果屬性集註入到選擇器中。

@mixin width($width-in: 1000px) { 
    width: $width-in; 
} 

.ios .child { 
    @include width(111px); 
} 

.android .child { 
    @include width(999px); 
} 

現在，讓我們通過該混入加載混入例如

1. 步驟，青菜知道此事，但並不用它做任何事情 - 把它像一個功能等待被稱爲
2. ios。sass被加載並且一個選擇器被定義
3. sass通過參數看到對mixin的調用，所以它使用參數，使用mixin並將返回的寬度值注入到選擇器中
4. android.sass is loaded ..
5. sass發現另一個調用mixin並重復該過程，將新的寬度值注入到新選擇器中。

我在mixin定義中的PS我使用默認值1000px，如果@include width();被調用，將使用這個默認值。