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` 
    } 
    } 
}