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

Question

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

.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 文件（源代码.span1）中是如何定义类的。它们是使用所谓的“ mixins ”（参见此处的示例）定义的，然后执行（此处的示例）。.span12

来自 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 不会让你能够做你想做的事（为每个类匹配条件动态应用样式，基于类名称的一部分），更好地重新考虑你的想法。