问答详情
源自：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");
       }

    }


    1
  • 慕粉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，代码合并后成了那个样子

    2