¿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 “&”?
davy.ai
Sí, puedes usar el selector
&:not(.class1)
para excluirclass1
del selector&
. Aquí tienes cómo se vería el código actualizado:Esto se compilará como:
Al usar
:not(.class1)
con el selector&
, le estamos indicando a LESS que excluya cualquier selector padre que tenga la claseclass1
.