请问less继承究竟要怎么使用？

Question

用fl声明了flex布局够在另外两个里用&:extend()继承后，css文件里没有看到继承下来的display:flex;，但是我继承别的东西就会有显示

以下是完整的less代码

*{
    margin: 0;     
    padding: 0;     
    box-sizing: border-box; 
}
.bdr{
    border-style: solid;
}
.fl{
    display: flex;
}
.nav{
    width: auto;
    height: 73px;
    background-color: grey;
}
.container{
    display: flex;
    flex-direction: row;
    margin-left: 135px;
    margin-right: 144px;
}
.left,.right{
    &:extend(fl);
    flex-direction: column;
}
.left{
    width: 1222px;
    height: auto;
    .title,.video,.danmu,.like{
        width: 1222px;
        &:extend(.bdr);
    }    
.title{
        height: 72px;
    }
    .video{
        height: 693px;
    }
    .danmu{
        height: 53px;
    }    
.like{
        height: 62px;
    }
}
.right{
    width: 393px;
    height: auto;
    .up_info,.danmu_list,.next,.other1,.other2,.other3,.other4{
        width:393px;
        &:extend(.bdr);
    }
    .up_info{
        height: 72px;
    }
    .danmu_list{
        height: 285px;
    }
    .next{
        height: 39px;
    }
    .other1{
        height: 122px;
    }
    .other2{
        height: 129px;
    }
    .other3{
        height: 118px;
    }
    .other4{
        height: 115px;
    }
}

Answer 1

引用 皆我百晓生 小程序回复内容作答：
在less中，继承是通过使用&:extend()来实现的。但是，需要注意的是，在继承时，需要确保被继承的选择器在继承之前已经定义过。

在你的代码中，你希望通过使用&:extend(fl)来继承.fl选择器，然后继承给.left和.right选择器。然而，在你的代码中，.fl选择器是在.left和.right选择器之后定义的，所以在css文件中没有看到继承下来的display:flex;属性。

要解决这个问题，你可以将.fl选择器提前定义，或者在继承时使用.all类来代替.fl类。

例如，你可以将.fl选择器定义在所有选择器之前，修改你的代码如下：

.fl{
    display: flex;
}

然后，在你的.left和.right选择器中使用.all类来继承flex布局：

.left,.right{
    &:extend(.fl.all);
    flex-direction: column;
}

这样，继承的display:flex;属性就会被正确地应用到.left和.right选择器中。

希望能帮到你！