sass中为什么::after和::before继承不到属性？

Question

&.classic{
    border-left:none;
    padding:1em .6em;
    text-indent:2em;
    position:relative;
    %ab{
      font-size:3.5em;
      color: #d2d4d2;
      text-indent:0;
      position:absolute;
      line-height:1;
    }
    &:before{
      content:'\201C';
      @extend %ab;
      top:.12em;
      left:-.4em;
    }
    &:after{
      content:'\201D';
      @extend %ab;
      bottom:-.38em;
      right:-.48em;
    }
    span{
      @extend %ab;
    }
  }

span可以继承到，为什么before和after继承不到

Answer 1

::before和::after继承到了属性，sass的写法有错误在线Sass。

看在线编译后的CSS，有一行是.classic .classic:before, .classic .classic:after, .classic span，
所以继承到了，但是仔细看的话会发现和需求应该不太一样，你需要的应该是
.classic:before, .classic:after, .classic span。
那么分析一下这个不符合预期的结果是怎么来的：
我们不看.classic这一层，看内层，&:before和&:after相当于.classic:before和.classic:after，使用了@extend %ab;后，变为.classic:before和.classic:after，但是此时我们还没有考虑.classic这一层，所以在加上这一层，就变为.classic .classic:before和.classic .classic:after。
所以主要就是%ab是作为.classic类的子元素存在的，所以使用extend之后的元素都是.classic的子元素。

解决办法，你可以把%ab提到和.classic同一层级，截图如下：

Answer 2

参见：https://stackoverflow.com/que...

继承是指父向子或者祖级向后代继承，而:after和:before是元素本身的伪类而已，直接写在CSS类里面即可

试一下：

&.classic {
    border-left: none;
    padding: 1em .6em;
    text-indent: 2em;
    position: relative;
    %ab, %ab:before, %ab:after {
        font-size: 3.5em;
        color: #d2d4d2;
        text-indent: 0;
        position: absolute;
        line-height: 1;
    }
    &:before {
        content: '\201C';
        top: .12em;
        left: -.4em;
    }
    &:after {
        content: '\201D';
        bottom: -.38em;
        right: -.48em;
    }
    span {
        @extend %ab;
    }
}