html - 当有多个类使用相同的属性时如何将 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;
    }
}