我已经为三种不同的表样式（不同的第一列宽度）编写了一些CSS，它们都可以扩展到不同数量的列。
我现在想把它转换成一些杀手LESS，但我的大脑无法抓住这样做而不会让它看起来像垃圾。我能想出的最好的是很长的，难以理解的，并且将来很难修改。
在研究类似的问题时，我发现了这些问题，但他们要么没有回答我的问题，要么对我来说太聪明了：
我也尝试过将这些CSS用于LESS工具，这些工具并没有比我自己提出的更好（见下文）
这里有a Fiddle希望显示我的目标最终结果，这个例子是六列布局。
我开始使用的CSS如下：
/*styles for variable column counts*/
table.questionTable.count_1 td{width:58%;}
table.questionTable.count_2 td{width:29%;}
table.questionTable.count_3 td{width:19.3%;}
table.questionTable.count_4 td{width:14.5%;}
table.questionTable.count_5 td{width:11.6%;}
table.questionTable.count_6 td{width:9.6%;}
table.questionTable.count_7 td{width:8.2%;}
table.questionTable.count_8 td{width:7.2%;}
table.questionTable.count_9 td{width:6.4%;}
table.questionTable.count_10 td{width:5.8%;}
table.questionTable.count_11 td{width:5.2%;}
table.questionTable.count_12 td{width:4.8%;}
table.questionTable.left50pc.count_1 td{width:48%;}
table.questionTable.left50pc.count_2 td{width:24%;}
table.questionTable.left50pc.count_3 td{width:16%;}
table.questionTable.left50pc.count_4 td{width:12%;}
table.questionTable.left50pc.count_5 td{width:9.6%;}
table.questionTable.left50pc.count_6 td{width:8%;}
table.questionTable.left50pc.count_7 td{width:6.8%;}
table.questionTable.left50pc.count_8 td{width:6%;}
table.questionTable.left50pc.count_9 td{width:5.3%;}
table.questionTable.left50pc.count_10 td{width:4.8%;}
table.questionTable.left50pc.count_11 td{width:4.3%;}
table.questionTable.left50pc.count_12 td{width:4%;}
table.questionTable.left60pc.count_1 td{width:38%;}
table.questionTable.left60pc.count_2 td{width:19%;}
table.questionTable.left60pc.count_3 td{width:12.6%;}
table.questionTable.left60pc.count_4 td{width:9.5%;}
table.questionTable.left60pc.count_5 td{width:7.6%;}
table.questionTable.left60pc.count_6 td{width:6.3%;}
table.questionTable.left60pc.count_7 td{width:5.4%;}
table.questionTable.left60pc.count_8 td{width:4.7%;}
table.questionTable.left60pc.count_9 td{width:4.2%;}
table.questionTable.left60pc.count_10 td{width:3.8%;}
table.questionTable.left60pc.count_11 td{width:3.4%;}
table.questionTable.left60pc.count_12 td{width:3.1%;}
table.questionTable td:first-child{
width:40%;
padding-left:2%;/*leaving us with 58% to play with*/
}
table.questionTable.left50pc td:first-child{
width:50%;/*leaving us with 48% to play with*/
}
table.questionTable.left60pc td:first-child{
width:60%;/*leaving us with 38% to play with*/
}
...起初我认为在转录为LESS时重复次数会少得多。不是这样......
我能想出的最好的情况是同样的事情如下：
table.questionTable{
/*styles for variable column counts*/
&.count_1 {
td{
width:58%;
}
&.left50pc{
td{
width:48%;
}
}
&.left60pc{
td{
width:38%;
}
}
}
&.count_2 {
td{
width:29%;
}
&.left50pc{
td{
width:24%;
}
}
&.left60pc{
td{
width:19%;
}
}
}
&.count_3 {
td{
width:19.3%;
}
&.left50pc{
td{
width:16%;
}
}
&.left60pc{
td{
width:12.6%;
}
}
}
&.count_4 {
td{
width:14.5%;
}
&.left50pc{
td{
width:12%;
}
}
&.left60pc{
td{
width:95%;
}
}
}
&.count_5 {
td{
width:11.6%;
}
&.left50pc{
td{
width:9.6%;
}
}
&.left60pc{
td{
width:7.6%;
}
}
}
&.count_6 {
td{
width:9.6%;
}
&.left50pc{
td{
width:8%;
}
}
&.left60pc{
td{
width:6.3%;
}
}
}
&.count_7 {
td{
width:8.2%;
}
&.left50pc{
td{
width:6.8%;
}
}
&.left60pc{
td{
width:5.4%;
}
}
}
&.count_8 {
td{
width:7.2%;
}
&.left50pc{
td{
width:6%;
}
}
&.left60pc{
td{
width:4.7%;
}
}
}
&.count_9 {
td{
width:6.4%;
}
&.left50pc{
td{
width:5.3%;
}
}
&.left60pc{
td{
width:4.2%;
}
}
}
&.count_10 {
td{
width:5.8%;
}
&.left50pc{
td{
width:4.8%;
}
}
&.left60pc{
td{
width:3.8%;
}
}
}
&.count_11 {
td{
width:5.2%;
}
&.left50pc{
td{
width:4.3%;
}
}
&.left60pc{
td{
width:3.4%;
}
}
}
&.count_12 {
td{
width:4.8%;
}
&.left50pc{
td{
width:4%;
}
}
&.left60pc{
td{
width:3.1%;
}
}
}
td:first-child{
width:40%;
padding-left:2%;/*leaving us with 58% to play with*/
}
&.left50pc td:first-child{
width:50%;/*leaving us with 48% to play with*/
}
&.left60pc td:first-child{
width:60%;/*leaving us with 48% to play with*/
}
}
}
...这与CSS到LESS工具的几行不同。
您如何将CSS编写为LESS，以便更具可读性和可维护性？
我有一种模糊的印象，即使用一些宽度计算值而不是硬编码百分比是可能的，或使用extend或其他mixin-magic。我的大脑疼痛。
答案 0 :(得分：1)
首先：定义宽度的公式。
.width(@margin, @count) {
width: (100%-@margin)/@count;
}
第二：定义一个mixin
.tds(@mg) {
&.count_1 {
td{
.width(@mg,1);
}
}
&.count_2 {
td{
.width(@mg,2);
}
}
}
第三：使用它
@mg1: 42;
table.questionTable{
.tds(@mg1);
}
@mg2: 52;
table.questionTable.left50pc{
.tds(@mg2);
}