什么是 CSS 的继承？
在 CSS 中，可以通过在父元素中定义样式来使其下的子元素继承该样式。这种继承方式称为 CSS 继承。例如，设置了一个 p 元素的颜色为 red，那么该 p 元素下的所有子元素的颜色都会被继承为 red。
CSS 的继承局限性
虽然 CSS 的继承给前端开发带来了很多便利，但其实它也存在一些局限性。比如，只有部分 CSS 属性支持继承，比如颜色、字体等属性可以被继承，而像 width、height 这些尺寸属性则不能被继承。此外，CSS 继承样式也不支持级联，即子元素无法通过继承样式修改某个父元素的值。
LESS 中的继承
LESS 是一种 CSS 预处理器，它通过类似编程语言的语法来提供一些强大的功能，比如变量、嵌套、混合、函数等。在 LESS 中，可以通过 @extend 关键字来实现继承样式。@extend 可以在样式表中代表另一个选择器的样式，并将其应用到指定选择器上。
基本语法
-- -------------------- ---- ------- -- ---------- ------- - ------ ---- ---------- ----- - -- -------------------- ------ - ------------------ ------------ ----- -
上述代码中，使用 &:extend(.parent) 的语法表示将 .child 元素继承 .parent 元素的样式。因此，.child 元素会继承 .parent 元素的 color 和 font-size 样式，同时添加自己的 font-weight 样式。
继承多个选择器的样式
使用 LESS 的 @extend 关键字还可以继承多个选择器的样式。例如：
-- -------------------- ---- ------- ------- - ------ ---- ---------- ----- - ------- - ----------------- ---- - ------ - ----------------- --------- ------------ ----- -
上述代码中，使用 &:extend(.parent, .bg-red) 的语法表示将 .child 元素继承 .parent 和 .bg-red 元素的样式。
继承带参数的样式
LESS 中的 @extend 还支持继承带参数的样式。例如：
-- -------------------- ---- ------- ------ - ------- --- ------ -------- ----- - -------- - ----------------- ------------- ------ - ------ - ----------------- ------------- ---- -
上述代码中，.alert 定义了一个带有 border 和 padding 样式的警告框。然后，通过 &:extend(.alert) 来继承警告框样式，并设置不同的 border-color 值来区分不同的样式。
总结
CSS 的继承样式能够帮助前端开发快速编写样式，但其实现的方式有些局限。LESS 中的 @extend 关键字则提供了更加灵活的继承方式，可以实现继承多个选择器样式、带参数样式等功能，帮助我们更加高效地编写样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f17f9ef6b2d6eab3b506e2