css - 更少的选择器嵌套

Question

我有以下代码

.signin-input{
    input{
        width: 100%;
        height: 2.5rem;
        color: black;

        :placeholder-shown{
        opacity: 1;
    }
    }

它产生以下 CSS

.signin-input input :not(:placeholder-shown) {
  opacity: 1;
}

这会触发错误选择器。如何让 less 像

一样正确对待它

.signin-input input:not(:placeholder-shown) {
      opacity: 1;
}

Answer 1

你忘了使用&

.signin-input {
   input {
      width: 100%;
      height: 2.5rem;
      color: black;
      &:placeholder-shown {
          opacity: 1;
      }
   }
}

将导致

.signin-input input:placeholder-shown {
  opacity: 1;
}

The & operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector. source: lesscss.org