less继承方式

less继承方式
在CSS中，我们可以使用“继承”（inheritance）的方式让某个元素继承它的父元素的样式。

这可以减少代码量，提高可维护性。

但是，有些情况下我们不想让子元素继承父元素的样式，这时候就需要使用less的特殊继承方式。

1. @extend
使用@extend指令可以将一个选择器的样式扩展到另一个选择器上，从而实现样式的继承。

例如：
```
.parent {
color: red;
}
.child {
@extend .parent;
}
```
这样，.child元素就会继承.parent元素的样式。

2. &:extend
与@extend类似，但是可以在同一个选择器中实现样式的继承。

例如：
```
.parent {
color: red;
}
.parent:hover {
font-weight: bold;
}
.child {
&:extend(.parent);
}
```
这样，.child元素就会同时继承.parent和.parent:hover元素的样式。

3. @mixin和@import
@mixin和@import都可以实现样式的复用，但是不同于继承方式。

@mixin是一种将一段样式代码打包并命名的方式，可以在需要
使用这段样式的地方调用。

例如：
```
@mixin border {
border: 1px solid;
}
.parent {
@include border;
}
.child {
@include border;
}
```
这样，.parent和.child元素都会拥有border样式。

@import是一种导入其他less文件中的样式的方式。

例如：
main.less
```
@import 'variables.less';
.parent {
color: @main-color;
}
```
variables.less
```
@main-color: blue;
```
这样，main.less文件中的.parent元素就会继承variables.less文件中定义的@main-color样式。

总结：在less中，除了常规的CSS继承方式，还有@extend、&:extend、@mixin和@import等特殊继承方式。

这些方式可以更好地实现样式的复用和管理。