These are chat archives for less/less.js

27th
Oct 2018
dimtabu
@taburetkin
Oct 27 2018 11:39

this is work fine:

.mixin(@side) {
  border-width-@{side}: 3px;
}
.test {
  .mixin(top);
}
// border-width-top: 3px;

but i am looking for a way to do something like that:

@anti-top: bottom;

.mixin(@side) {
  @opposite: "anti-@{side}";
  border-width-@{opposite}: 3px;
}
.test {
  .mixin(top);
}
// border-width-bottom: 3px;

what i am missing, how to do that?

dimtabu
@taburetkin
Oct 27 2018 12:10

it seems i found

@opposites: {
  @bottom: top;
  @top: bottom;
  @left: right;
  @right: left;
}

.mixin(@side) {
  @opposite: @opposites[@@side];
  border-width-@{opposite}: 3px;
}

.test {
  .mixin(top);
}
// border-width-bottom: 3px;

maybe there can be another way?

Calvin Juárez
@calvinjuarez
Oct 27 2018 12:23
Maybe there can, but I think this is the best solution.