Question

我在谷歌和互联网上搜索过，也在这个论坛上。我只是想知道如果我在LESS样式表中使用多个嵌套类会有什么问题吗？

即：

#main-menu{
    height:50px;
    overflow:visible;
    background-color: @main_green;
    border:none;
    border-bottom:5px solid darken(@main_green, 10%);
    .border-radius(0);

    .nav{
        > li{
            > a{
                color:#FFFFFF;
                padding:12px 20px 13px;
                border-right:1px solid darken(@main_green, 10%);
                .transition(all .09s ease);

                &:hover,
                &:focus{
                    background-color:darken(@main_green, 5%);
                    padding:13px 19px 17px 21px;
                    border-right-color:transparent;

                    .box-shadow(inset 1px 2px 4px -1px rgba(0,0,0,0.4));
                }
            }

            &.open > a{
                background-color:darken(@main_green, 5%);
                padding:13px 19px 16px 21px;
                border-right-color:transparent;

                .box-shadow(inset 1px 2px 4px -1px rgba(0,0,0,0.4));
            }

            &:first-child{
                > a{
                    border-left:1px solid darken(@main_green, 10%);
                }
            }

        }
    }

    .dropdown-menu{
        background-color:darken(@main_green,5%);
        border:none;
    }

}

编译结果没问题，没有出错。

谢谢。

Answer 1

根本没有问题，但是将它嵌套太多，你最终可能会使你的css选择器过于具体。例如，通用全局使用元素的样式不应该是不必要的嵌套。

此外，以下嵌套可以组合为单个选择器：

   &:first-child{
            > a{
                border-left:1px solid darken(@main_green, 10%);
            }
        }

与：

相同

&:first-child > a{
    border-left:1px solid darken(@main_green, 10%);
}

因此，当父级具有css属性时，应该使用嵌套，否则可以组合选择器，如上所示。

LESS上的多个嵌套类

1 个答案: