3

I've created separate mixins for border Shorthand property and another one for different sides.

Shorthand 

.border(@width: 1px, @style: solid, @color: black){
      border: @arguments;
}

Usage

.class1{
     .border;
}

For different sides

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

Usage

.class2{
     .bordered(top, 1px, solid red);
}

Is there a way to connect those too possibilities in one mixin?

Dwza
  • 6,494
  • 6
  • 41
  • 73
FrontDev
  • 837
  • 5
  • 19
  • something similar: http://stackoverflow.com/questions/24029771/smart-margin-mixin-for-less/26449038 – Bass Jobsen Oct 20 '14 at 20:11
  • Note the [Pattern Matching](http://lesscss.org/features/#mixins-parametric-feature-pattern-matching) feature. I.e. instead of trying to merge different behaviors in the same mixin it's better to provide different mixins with the same name so that either behavior can be selected depending on number and value of arguments passed (and whatever other argument properties if you additionally use [Guards](http://lesscss.org/features/#mixin-guards-feature)). – seven-phases-max Oct 20 '14 at 20:54
  • (On the other hand speaking of this specific use-case it's not clear why you need such mixin at all - can't you just write normal `border: 1px solid black;` and `border-top: 1px solid red;` instead. And predicting the vendor-prefixing thing, just a one word hint: "Autoprefixer"). – seven-phases-max Oct 20 '14 at 21:02

1 Answers1

1

To do this you can use LESS mixin guards which are something like if else conditions. More documentation about them is here - http://lesscss.org/features/#mixin-guards-feature Here is a quick pseudocode of my idea: 

.border when (@side = all) {
    .border(@width: 1px, @style: solid, @color: black, @side: all){
        border: @width @style @color;
    }
}
.border when not (@side = all) {
    .border(@property; @value; @side) {
        border-@{side}-@{property}: @value;
    }
}
thisiskatkat
  • 400
  • 1
  • 12