Question

我有这个代码，有不同类型的选择器，我想知道如果它在LESS中的代码将如何：

ul.sidebar-menu li a.active, 
ul.sidebar-menu li a:hover, 
ul.sidebar-menu li a:focus {
    color: #1FB5AD;
    display: block;
}

ul.sidebar-menu li a:hover, 
ul.sidebar-menu li a:focus {
    padding-left:30px;
}

ul.sidebar-menu li a { 
    font-size:1.1em; 
    padding:8px 0 8px 25px; 
    color: #888 
}

ul.sidebar-menu { 
    margin-top: 10px
}

我已经这样做了，但我不确定这是不是最好的方法。任何人都可以提供理论回应？

Answer 1

这是为更少写的代码：

ul.sidebar-menu li a.active, 
ul.sidebar-menu li a:hover, 
ul.sidebar-menu li a:focus {
    color: #1FB5AD;
    display: block;
}

ul.sidebar-menu li a:hover, 
ul.sidebar-menu li a:focus {
    padding-left:30px;
}

ul.sidebar-menu li a { 
    font-size:1.1em; 
    padding:8px 0 8px 25px; 
    color: #888 
}

ul.sidebar-menu { 
    margin-top: 10px
}

如果它与您发布的内容非常相似，那是因为我没有改变任何内容。

如果您希望以涉及嵌套的方式重写它，那么您应该考虑如何组织LESS代码。

就个人而言，我会重写所有使用类的代码，因为你没有任何理由增加选择器的特异性。将ul和li选择器留在那里只会在以后想要改变结构时使事情变得更加困难。

但是为了嵌套已编写的代码，您可以使用：

ul.sidebar-menu {
    li {
         a {
             &.active,
             &:hover,
             &:focus {
                 color: #1FB5AD;
                 display: block;
             }

             &:hover,
             &:focus {
                 padding-left: 30px;
             }

             color: #888;
             font-size:1.1em; 
             padding:8px 0 8px 25px; 
         }
    }

    margin-top: 10px;
}

Answer 2

您可以使用以下网站：http://css2less.cc/进行检查。

ul.sidebar-menu li a.active,ul.sidebar-menu li a:hover,ul.sidebar-menu li a:focus {
    color: #1FB5AD;
    display: block;
}
ul.sidebar-menu li a:hover,ul.sidebar-menu li a:focus {
    padding-left:30px;
}
ul.sidebar-menu {
    margin-top: 10px;
    li {
        a {
            font-size:1.1em;
            padding:8px 0 8px 25px;
            color: #888;
        }
    }
}

CSS到LESS语法

2 个答案: