css - Mixins:实现有困难

Question

是否可以从此混音中仅选择 border-top。 现在我只需要顶部边框，但想收集它们以供使用。我想为每个侧边框使用单独的 mixin 是错误的，

 .bordered(@top-width: 1px, @top-color: #fff, @bottom-color: #fff) { 
     border-top: @top-width solid @top-color; 
     border-left: @top-width solid @left-color; 
     border-right: @top-width solid @right-color; 
     border-bottom: @top-width solid @bottom-color; }

我想为两者使用相同的 mixin 来获得此输出

.class1{border-top:6px solid red;}
.class2{border-bottom:1px solid white;} 

谢谢

Answer 1

您可以创建一个 mixin，在其中传入您想要的边框类型。这样你就可以只拥有一个多次调用的 mixin。

此 mixin 使用 Less v1.6+ 中可用的属性插值

http://lesscss.org/features/#variables-feature-properties

.border(@property; @value){
  border-@{property}: @value;       
}

.bacon {
  .border(top; 1px solid black);
}

// Outputs
.bacon {
  .border-top: 1px solid black;
}