当有多个 类 使用相同的属性时如何将 CSS 转换为 LESS

Question

这是我的CSS。我如何将此代码转换为 LESS 格式。

.A .B h4, .A .B h4 a, .A .C h4, .A .C h4 a, .D h4, .D h4 a 
{
    color: #345e8a !important;
    display: inline-block;
    font-family: @font-family-sans-serif;
    font-size: 17px !important;
}

Answer 1

LESS 只是一个 CSS 预处理器，它是你的选择器可以进行改进，我们可以将它与 LESS 命名空间结合起来，得到类似的东西：

.A, .D
{
    h4, a
    {
        color: #345e8a !important;
        display: inline-block;
        font-family: @font-family-sans-serif;
        font-size: 17px !important;
    }
}

在上面我简单地去掉了你的 .A .C 和 .A .B 选择器。如果您需要这些，那么您最终可能会得到一个同样混乱的解决方案，但可读性更高：

.A .B, .A .C, .D
{
    h4, a
    {
        color: #345e8a !important;
        display: inline-block;
        font-family: @font-family-sans-serif;
         font-size: 17px !important;
    }
}