Question

我是LESS CSS的新手，但我花了很多时间学习CSS。目前我正在将我的CSS代码迁移到LESS以便学习和提高自己。我在进行迁移过程时偶然发现了这一点，

现有的CSS代码

#sidebar {
    -webkit-transition: background 1.2s ease, padding 1.8s linear;
    background: #3c3c3c;
}

#sidebar .actionMenuList {
    margin-bottom: 20%;
}

#sidebar .actionMenuList .topNavMenuList,
#sidebar .navigationMenuList .topNavMenuList {
    -webkit-transition: background 0.3s ease-in-out;
     border-bottom: .1em solid #FDF7F8;
}

编写此LESS代码

#sidebar {
   -webkit-transition: background 1.2s ease, padding 1.8s linear;
    background: #3c3c3c;

    .actionMenuList {
        margin-bottom: 20%;

        .topNavMenuList {
            -webkit-transition: background .3s ease-in-out;
            border-bottom: .1em solid #FDF7F8;
        }
    }
}

但是我被卡在一个地方，我如何使用上面的层次结构为navigationMenuList类选择器编写css prop。或者我是否需要回归这个

的常用CSS方式

#sidebar .actionMenuList .topNavMenuList,
#sidebar .navigationMenuList .topNavMenuList {

Answer 1

你刚才

#sidebar {
    .navigationMenuList .topNavMenuList { }    
}

一起

#sidebar {       
    .actionMenuList {
        .topNavMenuList { ... }
    }
    .navigationMenuList {
        .topNavMenuList { .... }
    }
}

OR

假设两者的规则相同

#sidebar {
    .actionMenuList,
    .navigationMenuList {
        .topNavMenuList { 
            -webkit-transition: background 0.3s ease-in-out;
            border-bottom: .1em solid #FDF7F8;
        }
    }
}

你甚至可以做到

#sidebar {
    .actionMenuList .topNavMenuList,
    .navigationMenuList .topNavMenuList { 
        -webkit-transition: background 0.3s ease-in-out;
        border-bottom: .1em solid #FDF7F8;
    }
}

另一方面，如果您遇到转换困难并需要使其正常工作。只需将css留在less文件中，它就会正常工作。

Answer 2

这对我有用，并且符合我的预期。

#sidebar {
    -webkit-transition: background 1.2s ease, padding 1.8s linear;
    background: #3c3c3c;

    .actionMenuList { margin-bottom: 20%; }

    .actionMenuList .menuItem, .navigationMenuList .menuItem {
        -webkit-transition: background .3s ease-in-out;
        border-bottom: .1em solid #FDF7F8;
    }
}

如何将此嵌套选择器转换为LESS？

2 个答案: