Closed. This question is
opinion-based。它当前不接受答案。
想改善这个问题吗？更新问题，以便
editing this post用事实和引用来回答。
3年前关闭。
我已经为三种不同的表格样式（不同的第一列宽度）编写了一些CSS，它们都应该可以缩放为不同数量的列。
现在，我想将其转换为更少的杀手级武器，但是我的大脑无法掌握一种方法，而不会使其看起来像垃圾。我能想到的最好的是很长的，很难理解的，将来将很难修改。
在研究类似问题时，我在SO上找到了这些问题，但是它们要么没有回答我的问题，要么太聪明了以至于我无法理解：
Less.js - strong nested rules?Does LESS have an "extend" feature?Less multiple parent usageLESS transition mixin with prefixesLess CSS: Mixins with Variable Number of ArgumentsConverting css to lessConvert this CSS to LessWell formed CSS to LESSConvert CSS to LESS selector我还尝试了这些CSS到LESS工具，这些工具并没有比我自己想像的要好（见下文）
http://leafo.net/lessphp/lessify/还有两个，但是您需要的信誉比我必须发布两个以上的链接更多：(
[css2less dot co]
[css2less点网]
这是
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时会少很多重复。不是这样
我能想到的最好的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，以使其更具可读性和可维护性？
我有一个模糊的印象，可以使用一些计算出的宽度值，而不是硬编码百分比，或者使用扩展或其他mixin-magic。我的脑痛。
首先：定义宽度的公式。
.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);
}