Question

我想做一个像这样的轻松风格：

.td-middle50
{
   line-height:50px;
   vertical-align:middle;
}

我可以申请使所有元素的行高为50px并垂直对齐。

其中50是变量。

这是我所拥有的：

.td-middle(@vheight){
    line-height:(@vheight);
    vertical-align:middle;
}

但是这个： A）甚至不起作用 B）我必须申请每个td而不是tr

Answer 1

了解如何在Twitter Bootstrap的LESS文件（source）中定义.span1 - .span12个类。它们是使用所谓的“ mixins ”（see example here）定义的，然后执行（example here）。

来自Bootstrap的代码（mixins.less）：

// The Grid
#grid {
  .core (@gridColumnWidth, @gridGutterWidth) {
    .spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}
    /* ... a lot of code here ... */
  }
  /* ... other code ... */
}

mixins的使用（grid.less内）：

// Fixed (940px)
#grid > .core(@gridColumnWidth, @gridGutterWidth);

// Fluid (940px)
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);

良好的开端是了解有关mixins的更多信息：http://lesscss.org/#-mixins

但是我有一个建议：如果你希望这对提到的“变量”的每个值起作用，那么就停止。这必须编译成CSS并且CSS不会让你能够做你想要的（根据类的名称的一部分动态地为每个类匹配标准应用样式），更好地重新思考你的想法。

自定义LESS样式，如Bootstrap的“spanX”

1 个答案: