[sass/scss]继承示例

scss代码:

/*简单继承*/
.div {
    border:1px;
    background-color: red;
}

.divext {
    @extend .div;
    border-width: 3px;
}

/*关联属性继承*/
.div1 {
    border:1px;
    background-color: red;
}

.div1.other {
    background-image: url('hello.jpeg');
}

.divext {
    @extend .div1;
}

/*链式继承继承*/

.div1 {
    border: 1px solid #000;
    color: blue;
}
.div2 {
    @extend .div1;
    color: red;
}
.div3 {
    @extend .div2;
    color: #000;
}

/*伪类继承*/
a:hover {
    text-decoration: underline;
}
.hoverlink {
    color: red;
    @extend :hover;
}

编译后得到的css代码:

@charset "UTF-8";
/*简单继承*/
.div, .divext {
  border: 1px;
  background-color: red;
}

.divext {
  border-width: 3px;
}

/*关联属性继承*/
.div1, .divext, .div2, .div3 {
  border: 1px;
  background-color: red;
}

.div1.other, .other.divext, .other.div2, .other.div3 {
  background-image: url("hello.jpeg");
}

/*链式继承继承*/
.div1, .divext, .div2, .div3 {
  border: 1px solid #000;
  color: blue;
}

.div2, .div3 {
  color: red;
}

.div3 {
  color: #000;
}

/*伪类继承*/
a:hover, a.hoverlink {
  text-decoration: underline;
}

.hoverlink {
  color: red;
}