我正在尝试使用.panel-heading作为混合内部的一些自定义LESS我正在使用Bootstrap框架工作.
然而,并非所有的CSS都使用mixin.
在引导文件中,.panel-heading有以下定义:
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) { border-color: @border; & > .panel-heading { color: @heading-text-color; background-color: @heading-bg-color; border-color: @heading-border; + .panel-collapse .panel-body { border-top-color: @border; } } & > .panel-footer { + .panel-collapse .panel-body { border-bottom-color: @border; } } } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; .border-top-radius(@panel-border-radius - 1); }
当我执行以下操作时:
.panel { .panel-default; header { .panel-heading; } }
只有color
,background-color
并且border-color
被拉过来.有什么想法发生了什么?
HTML在这里:
Bass Jobsen.. 6
.panel { &:extend(.panel-default all); header { &:extend(.panel-heading all); } }
另请参阅:少继承"虚拟"类
.panel { &:extend(.panel-default all); header { &:extend(.panel-heading all); } }
另请参阅:少继承"虚拟"类