sass入门

只记录需要记录的：

@extend:他相当于把元素直接复制到extend的那个元素的位置

.error {
    border: 1px solid red;
    background-color: rgb(255, 231, 231)
}

.error a {
    //应用到.seriousError a
    color: red;
    font-weight: 100;
}

h1.error {
    //应用到hl.seriousError
    font-size: 1.2rem;
}

.seriousError {
    @extend .error;
    border-width: 3px;
}

转换成

.error, .seriousError {
  border: 1px solid red;
  background-color: rgb(255, 231, 231);
}

.error a, .seriousError a {
  color: red;
  font-weight: 100;
}

h1.error, h1.seriousError {
  font-size: 1.2rem;
}

.seriousError {
  border-width: 3px;
}/*# sourceMappingURL=style.css.map */