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

问题描述

问 题

&.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继承不到

解决方案

::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同一层级，截图如下：

这篇关于css - sass中为什么::after和::before继承不到属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！