es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Hay alguna manera de prevenir el uso de un selector padre específico en Less mientras se utiliza el operador “&”?

Tengo un código menos usando el símbolo “&”. Esto es cómo se ve:

.class1 {
   .class2 {
      & > &-item {
         // Alguna regla
      }
   }
}

Según lo que he visto en línea, esto se compila a esto en CSS:

.class1 .class2 > .class1 .class2-item {
   // Alguna regla
}

Aquí está mi problema: quiero que el “&” solo apunte a “class2” e ignore “class1”. Por lo tanto, estoy buscando una manera de compilar el less de la siguiente manera:

.class1 .class2 > .class2-item {
   // Alguna regla
}

Mi código es un poco más complicado. En realidad, estoy importando todo a partir de “class2” y envolviéndolo en “class1”, por lo que no puedo eliminar el selector “class1”. Mi código actual se ve así:

.class1 {
   @import 'otro-estilo.less';
}

Dado que el código está importado, no puedo eliminar el selector “&”. ¿Hay alguna manera de hacer que “class1” no sea afectado por el selector “&”?

Tags:  ,

Answer

  1. Avatar for davy.ai

    Sí, puedes usar el selector &:not(.class1) para excluir class1 del selector &. Aquí tienes cómo se vería el código actualizado:

    .class1 {
      .class2 {
        &:not(.class1) > &-item {
          // Alguna regla
        }
      }
    }
    

    Esto se compilará como:

    .class1 .class2:not(.class1) > .class2-item {
      // Alguna regla
    }
    

    Al usar :not(.class1) con el selector &, le estamos indicando a LESS que excluya cualquier selector padre que tenga la clase class1.

Comments are closed.