Question

I want to make a LESS style like so:

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

that I can apply to to make all the elements have a line-height of 50px and be vertically aligned.

Where 50 is a variable.

This is as far as I have got:

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

But this:
A) Doesn’t even work
B) I would have to apply to each td instead of the tr

Answer 1

Take a look on how .span1–.span12 classes are being defined in Twitter Bootstrap’s LESS files (source). They are defined using so called “mixins” (see example here) that are then executed (example here).

From Bootstrap’s code (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 ... */
}

Usage of mixins (within grid.less):

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

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

Good start would be to learn more about mixins: http://lesscss.org/#-mixins

But I have one advice: if you want this to work for every value of mentioned “variable”, then stop. This must be compiled to CSS and CSS will not make you able to do what you wanted (to apply styles dynamically for every class matching criteria, based on part of the class’s name), better rethink your idea.