问答详情
源自:5-3 @extend

练习的结果有点疑问

.error, .seriousError {

  border: 1px #f00;

  background-color: #fdd; }


.error.intrusion, .intrusion.seriousError {

  background-image: url("/image/hacked.png"); }


.seriousError {

  border-width: 3px; }

练习中的编译结果是这样的,不明白中间为什么是.intrusion.seriousError ,难道不应该是.error.seriousError 吗,有人知道是为什么吗


提问者:wwwwwww 2016-09-19 10:22

个回答

  • wwwwwww
    2016-09-23 11:36:33

    嗯,有道理。谢谢。

    不过这个是不是应该这么写呀。

    .error {
     border: 1px #f00;
     background-color: #fdd;

        &.intrusion {
       background-image: url("/image/hacked.png");
       }

    }


  • 慕粉3805039
    2016-09-22 09:59:29

    可能在SCSS中,.error {
     border: 1px #f00;
     background-color: #fdd;
    }
    .error.intrusion {
     background-image: url("/image/hacked.png");
    }

    是等价与.error {
     border: 1px #f00;
     background-color: #fdd;

        .intrusion {
       background-image: url("/image/hacked.png");
       }

    }的

    .seriousError中继承了.error的样式,所以

    .seriousError{
     border: 1px #f00;
     background-color: #fdd;

        .intrusion {
       background-image: url("/image/hacked.png");
       }

    }

    解析成css,代码合并后成了那个样子