SCSS嵌套的for循環崩潰編譯器

Question

所以我有以下代碼：

h1, h2, h3, h4, h5, h6 { 
    font-size: 22px; 
} 

@for $i from 1 through 6 { 
    @for $j from 1 through 6 { 
    $s: 'h' + $i; 
    $ss: 'h' + $j; 
    .#{$s}-style { 
     @extend #{$s}; 
    } 
    #{$ss}.#{$s}-style { 
     @extend #{$s}; 
    } 
    } 
} 

忽略頂部是對於h元素只是這樣的造型存在。

如果我運行這個SCSS編譯器剛剛去世（或崩潰的計算機）比這個我想不通爲什麼這一個會導致崩潰，更過分的我已經運行循環，能欣賞到這來的人？

Answer 1

問題是由您的第二個擴展造成的。每次通過您的內循環產生H1-H6的選擇器6個新副本和薩斯具有給他們的每一個延伸。擴展會一直執行半部分匹配（例如延長h1將延長h1.foo，.foo h1 .bar，h1:hover，等等。）

採用了獨特的擴展，只選擇，而不是你的擴展用途：

h1, h2, h3, h4, h5, h6, %h1, %h2, %h3, %h4, %h5, %h6 { 
    font-size: 22px; 
} 

@for $i from 1 through 6 { 
    @for $j from 1 through 6 { 
    $s: 'h' + $i; 
    $ss: 'h' + $j; 
    @debug $s, $ss; 
    .#{$s}-style { 
     @extend #{$s}; 
    } 
    #{$ss}.#{$s}-style { 
     @extend #{'%'}#{$s}; // extend `%hn` instead of `hn` 
    } 
    } 
}