较少嵌套选择器

Question

I have the following code

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

        :placeholder-shown{
        opacity: 1;
    }
    }

It results in the following CSS

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

And that fires and error of a bad selector. how to make less treat it correctly like

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

Answer 1

You forgot to use &

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

Will result to

.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