代码之家  ›  专栏  ›  技术社区  ›  Pegaz

使嵌套选择器生成不带空格的选择器[关闭]

  •  -2
  • Pegaz  · 技术社区  · 6 年前

    我有一个特定的场景,我不想用更简单的方式来写。

    我有这个html:

    <div class="parent selector-one selector-two">
        Parent
        <div class="child">
            Child
        </div>
        <div class="second-child">
            Second child
        </div>
    </div>
    

    我想生成这个css的方法是:

    .parent {
        font-size: 14px;
    }
    
    .parent.selector-one {
        color green;
    }
    
    .parent.selector-two .child {
        color: red;
    }
    
    .parent .second-child {
        color: blue;
    }   
    

    我想用较少的篇幅写这样的东西:

    .parent {
        #SYNTAX#:selector-one {
            color:green;
        }
    
        #SYNTAX#:selector-two {
            &.child {
                color:red;
            }
        }
    
        &.second-child {
            color: blue;
        }
    }
    

    有没有语法可以在less中做这样的事情?

    1 回复  |  直到 6 年前
        1
  •  3
  •   Praveen Kumar Purushothaman    6 年前

    我相信这应该能完成任务。

    作为 & 选择父元素。

    .parent {
        &.selector-one {
            color:green;
        }
    
        &.selector-two {
            .child {
                color:red;
            }
        }
    
        & .second-child {
            color: blue;
        }
    }