像引導的「SPANX」

定製LESS風格我想打一個不太風格像這樣：像引導的「SPANX」

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

，我可以適用於使所有元素都具有50像素的行高和可豎直對齊。

其中50是變量。

這是據我已經得到：

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

但這： A）甚至不工作 B）我會應用到每個TD，而不是TR

來源

2012-07-22 Jason

看看如何在Twitter Bootstrap的LESS文件（source）中定義類.span1-.span12。它們使用所謂的「 mixins」（see example here）定義，然後執行（example here）。

從引導代碼（mixins.less）：

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

混入的用法（內grid.less）：

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

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

良好的開端將是更多地瞭解混合類型：http://lesscss.org/#-mixins

但我有一個建議：如果你想這個工作爲每價值提到的「變量e「，然後停下來。這必須編譯爲CSS，並且CSS不會讓你做你想做的事（根據類名的一部分爲每個類匹配條件動態應用樣式），更好地重新思考你的想法。

來源

2012-07-22 00:45:56 Tadeck

像引導的「SPANX」

回答

相關問題