css - 少边框合二为一

Question

如何用更少的代码编写下面的代码。如何以最佳方式缩短代码。提前致谢！

代码：

.border {
  border: solid 1px;
}
.border-color-inherit {
  border-color: inherit !important;
}
.border-top {
  border-top: solid 1px;
}
.border-left {
  border-left: solid 1px;
}
.border-bottom {
  border-bottom: solid 1px;
}
.border-right {
  border-right: solid 1px;
}
.border-none {
  border: none !important;
}

我尝试：

@x: ~"solid 1px";
.res (@border) 
     {
        border-top: @x;
        border-left: @x;
        border-right: @x;
        border-bottom: @x;
  }

  .border-top{
    .res (@x);
  .border-left{
    .res (@x);  
  }
  }

所以，我尝试了很多方法来使它成为可能，但没有任何成功。它看起来不太好。

标签： cssless

Answer 1

Try it this way

.border {
  border: solid 1px;
  border-color: inherit !important;
}

.border-none {
  border: none !important;
}