Question

我有一个像这样的scss选择器：

.post-content {
    @for $i from 3 through 6 {
    h#{$i} { @extend h#{$i - 1};}
    }
}

例如.post-content h4，它将扩展h3，但h3不仅仅在_pure.scss中定义，它还在.post-content（前一循环）中定义。所以我们得到这个输出（链接扩展）：

/* line 141, ../sass/_pure.scss */
h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

/* line 146, ../sass/_pure.scss */
h3, .post-content h4, .post-content h5, .post-content h6 {
  font-size: 1.17em;
  margin: 1em 0;
}

/* line 151, ../sass/_pure.scss */
h4, .post-content h5, .post-content h6 {
  font-size: 1em;
  margin: 1.33em 0;
}

/* line 156, ../sass/_pure.scss */
h5, .post-content h6 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

/* line 161, ../sass/_pure.scss */
h6 {
  font-size: 0.67em;
  margin: 2.33em 0;
}

但这就是我想要的：

h2, .post-content h3 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3, .post-content h4 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4, .post-content h5 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5, .post-content h6 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

@extend-Only选择器不是解决方案：

@for $i from 3 through 6 { 
     %post-h#{$i} { @extend h#{$i - 1} ; } 
} 


.post-content {
    @for $i from 3 through 4 {
    h#{$i} { @extend %post-h#{$i} ; }
    }
}

我也试过这个：

@mixin extendHeader($i) {
    @extend h#{$i};
}

.post-content {
    @for $i from 3 through 6 {
    h#{$i} { @include extendHeader($i - 1)}
    }
}

和此：

.post-content {
    $i: 6;
    @while $i > 2 {
    h#{$i} { @extend h#{$i - 1}; }
    $i: $i - 1;
    }
}

全部不起作用。有没有办法获得scss文件的根引用？

SASS：@extend范围之外的类

0 个答案: