Css 提高LESS的可读性

我已经为三种不同的表格样式（不同的第一列宽度）编写了一些CSS，它们都应该能够扩展到不同的列数

我现在想把它转换成一些不那么致命的东西，但是我的大脑无法掌握一种方法来做到这一点而不让它看起来像垃圾。我能想出的最好的办法是冗长、难以理解，将来也很难修改

在研究类似问题时，我发现这些问题都是如此，但它们要么没有回答我的问题，要么太聪明了，我无法理解：

我还尝试使用这些CSS来减少工具的使用，这并不比我自己想出的更好（见下文）

• 还有两个，但你需要更多的声誉，而不是我必须发布两个以上的链接：(
• [css2less dot公司]
• [css2less.net]

这里是我希望展示的最终结果，我的目标，这个例子是一个六列布局

我开始使用的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*/
}

    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*/
        }
    }
}

…一开始我以为当转录到更少的时候，重复会少很多。不是这样

我能想出的做同样事情的最好方法如下：

/*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*/
}

    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 to LESS工具提出的只有几行不同

如何编写更少的CSS，使其更具可读性和可维护性？

---

我有一个模糊的印象，使用一些计算出的宽度值，而不是硬编码的百分比，或者使用extend或其他一些mixin魔法，都是可能的。我的大脑很痛。

首先：定义宽度的公式

.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);
}

---

你可以使用循环（只需在这里查询

[less]循环

），但首先我建议你考虑一下CSS的优雅（

table.questionTable.left60pc.count\u 1 td

？真的吗？）.@seven phases max谢谢你的提示！@seven phases max我写了我能写的CSS-从你的评论中不清楚我将如何使它更优雅，而且，由于CSS是有效的，我将搁置你的这部分评论，因为它主要基于观点；）这是传奇性的-我知道有一种更流畅的方式来写这篇文章！谢谢，你帮了我很多忙，因为我现在可以看到我如何将这一点应用到我的项目的其他几个领域：）我想如果我能在你的第二步中使用一个循环，按照上面的@seven Phase max建议，那么我今天就真的赢得了我的甜甜圈。