一对一视频直播源码，scss的推展写法详解

scss拓展写法

.a {
    .b {
        &:hover {
            width: 100px;
        }
        &.c {
            width: 100px;
        }
        &-d {
            width: 100px;
            font: {
                size: 20px;
            }
        }
    }
}

 

转化为:

.a .b:hover {
  width: 100px;
}
.a .b.c {
  width: 100px;
}
.a .b-d {
  width: 100px;
  font-size: 20px;
}
// %base (占位符)用占位符防止.button编译 
.button%base {
    color: #333;
}

.btn-success {
    @extend %base;
    background-color: green;
}
.btn-error {
    @extend %base;
    background-color: red;
}

 

转化为:

.button.btn-error, .button.btn-success {
  color: #333;
}

.btn-success {
  background-color: green;
}

.btn-error {
  background-color: red;
}

 

以上就是一对一视频直播源码，scss的推展写法详解， 更多内容欢迎关注之后的文章