Question

我试图在按钮上覆盖Bootstrap的悬停效果。我想节省一些空间并通过简单地将一个类的名称传递到一个混合中并且使该类具有这种灵活性。背景变量会自动从中推断出来。所以我的混音是：

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

.btn-hover(btn-primary);

但我似乎无法通过将@btn-primary-bg连接到-bg来访问变量btn-primary，因为@~"@{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

LESS变量连接和插值

1 个答案: