LESS 变量连接和插值

Question

我正在尝试覆盖 Bootstrap 在按钮上的悬停效果。我想节省一些空间，并通过简单地将类的名称传递给 mixin 并让该类的背景变量自动从中推导出来以巧妙的方式完成。所以我的mixin是：

.btn-hover(@name){
  .@{name}:hover{
      background: lighten( @~"@{name}-bg", 10% );
   }
}

.btn-hover(btn-primary);

但我似乎无法通过将-bg 连接到btn-primary 来访问变量@btn-primary-bg，因为@~"@{btn-name}-bg" 会导致编译器错误。我想要做的甚至可能吗？如果是这样，那将是非常漂亮的。

编辑 ---------------------------------- -------------------

偶然发现了这个question，它肯定是相关的，但我认为我的问题真的可以归结为：

在LESS中，字符串连接后可以通过插值访问变量吗？

@btn-success-bg: #00ff00;
@name: btn-success;
@background: @~"@{name}-bg";  // How do I access @btn-success-bg?

Answer 1

你可以这样做：

   @btn-primary-bg: red;

    .btn-hover(@name){
      .@{name}:hover{
          @buttonname: ~"@{name}-bg";
          background: lighten( @@buttonname, 10% );
       }
    }

    .btn-hover(btn-primary);

另见：http://lesscss.org/features/#variables-feature-variable-names