sass 学习笔记3

最新推荐文章于 2024-07-10 22:11:08 发布

前端白子

最新推荐文章于 2024-07-10 22:11:08 发布

阅读量65

点赞数

文章标签： sass 学习 css

本文链接：https://blog.csdn.net/Choiceanxiety/article/details/129318400

版权

sass继承、嵌套…

相同的属性不会被合并，都会展现；

1.简单继承

@extend 要继承的标签名（类名、id名…）

2.关联属性继承

要继承的元素，也将继承原被继承元素的关联类属性（举例：.div.other）

3.链式继承

累加嵌套

4.伪类继承

使用伪类来继承

下面请看实例

.div1 {
    color: yellow;
    font-size: 20px;
}
.div1.other {
    margin: 10px;
}
.div2 {
    color: green;
    font-size: 40px;
}

// 简单继承
.div3 {
    @extend .div2;
    border: 1px solid #000;
}
// 关联属性继承
.div4.other {
    @extend .div1;
}
// 链式继承
.div5 {
    color: red;
}
.div6 {
    @extend .div5;
    color: white;
}
.div7 {
    @extend .div6;
    background-color: lightcoral;
}
// 伪类继承
a:hover {
    text-decoration: underline;
}
.hoverLink {
    color: lightblue;
    @extend :hover;
}

转译css

/* 关联属性继承 */
.div1, .div4.other {
  color: yellow;
  font-size: 20px;
}

.div1.other, .other.div4 {
  margin: 10px;
}
/* 简单继承 */
.div2, .div3 {
  color: green;
  font-size: 40px;
}

.div3 {
  border: 1px solid #000;
}
/* 链式继承 */
.div5, .div6, .div7 {
  color: red;
}

.div6, .div7 {
  color: white;
}

.div7 {
  background-color: lightcoral;
}
/* 伪类继承 */
a:hover, a.hoverLink {
  text-decoration: underline;
}

.hoverLink {
  color: lightblue;
}