Sass 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

继承的高级用法

任何css规则都可以继承其他规则,几乎任何css规则也都可以被继承。大多数情况你可能只想对类使用继承,但是有些场合你可能想做得更多。最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承,因为它们不属于样式表中的样式,但是你对html元素添加的所有样式都会被继承。

接下来的这段代码定义了一个名为disabled的类,样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现:

.disabled {
  color: gray;
  @extend a;
}

假如一条样式规则继承了一个复杂的选择器,那么它只会继承这个复杂选择器命中的元素所应用的样式。要继承的不仅仅是一个类名,可以是一个id也可以是一个元素,也可以是某个状态,任何选择器都能继承。如下

SCSS代码

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编译后的CSS代码

a:hover, .hoverlink {
  text-decoration: underline;
}

就像上面编译出来的一样,在hover状态下的样式也能继承。所以不仅是ahover状态,几乎任何选择器都能继承。