css - 自定义 LESS 样式，例如 Bootstrap 的 "spanX"

Question

我想做一个像这样的 LESS 样式:

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

我可以应用它来使所有元素的行高为 50 像素并垂直对齐。

其中 50 是一个变量。

据我所知:

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

但是这个:A)甚至不工作B)我必须申请每个 td 而不是 tr

Answer 1

看看 .span1-.span12 类是如何在 Twitter Bootstrap 的 LESS 文件 (source) 中定义的。它们使用所谓的“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 ... */
}

mixin 的使用(在 grid.less 中):

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

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

良好的开端是学习更多关于 mixin 的信息:http://lesscss.org/#-mixins

但我有一个建议:如果您希望它对提到的“变量”的每个 值起作用，则停止。这必须编译成 CSS，CSS 不会让你做你想做的事(根据类名的一部分为每个类匹配条件动态应用样式)，最好重新考虑你的想法。