4

Me he encontrado con esto en un fichero de sass/scss de Bootstrap v4:

.nav-pills {
  .nav-link {
    @include border-radius($nav-pills-border-radius);

    &.active,
    .show > & { /* <-- !!! */

      color: $nav-pills-link-active-color;
      background-color: $nav-pills-link-active-bg;
    }
  }
}

Se que normalmente se refiere & al selector padre (directo):

.clasePadre {

  &.claseHijo {

  }
}

Equivale a .clasePadre.claseHijo.

¿Entonces sería en este caso .show > & equivalente a .show > .nav-pills .nav-link?

Es decir: ¿Se hereda todas los selectores padres con &?

1
  • Diría que ese código de Bootstrap está mal. Revisando la versión 4.6.X está como .show > .nav-link Commented el 21 jul. a las 19:26

1 respuesta 1

7

¿Entonces sería en este caso .show > & equivalente a .show > .nav-pills .nav-link?

.

¿Se hereda todas los selectores padres con &?

.

Según la documentación oficial (Inglés):

Sometimes it's useful to use a nested rule's parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over or for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the & character.

Traducción de librosweb.es:

En ocasiones es necesario modificar el comportamiento por defecto de los selectores anidados. Imagina que quieres aplicar estilos especiales en el estado hover del selector o cuando el elemento <body> de la página tiene una determinada clase. En estos casos, puedes utilizar el carácter & para hacer referencia al selector padre dentro del cual se encuentra la regla anidada.

Ejemplo sass/scss:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

El código sass/scss anterior se compila de la siguiente manera:

a { font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
body.firefox a { font-weight: normal; }

El carácter especial & siempre se reemplaza por el selector padre tal y como aparece en el archivo CSS. Esto significa que si tiene una regla anidada, primero se calcula el selector padre completo y después se reemplaza por &.

Ejemplo sass/scss:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

Se compila en CSS:

#main { color: black; }
#main a { font-weight: bold; }
#main a:hover { color: red; }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.