sibling - sass style parent based on child

Sass ampersand, ¿seleccionar padre inmediato?

Question

¿Hay una manera en Sass de usar el signo y seleccionar el padre inmediato, en lugar del selector principal de todo el grupo? Por ejemplo:

.wrapper{
    background-color: $colour_nav_bg;
    h1{
        color: $colour_inactive;
        .active &{
            color: red;
        }
    }
}

compila a

.wrapper h1{
    color: grey;
}

.active .wrapper h1{
    color: red
}

pero lo que realmente quiero es:

.wrapper .active h1{
    color: red;
}

¿Es la única opción para escribir el SCSS así?

.wrapper{
    background-color: $colour_nav_bg;
    h1{
        color: $colour_inactive;
    }
    .active h1{
        color: red;
    }
}

El HTML se ve así:

<ul class="wrapper">
    <li class="active">
        <h1>blah</h1>
    </li>
</ul>

Answer 1

A menudo he querido hacer lo que me estás pidiendo y es un no ir. Sin embargo, escuché que puedes hacer ese tipo de cosas en Stylus. Pero hay otra cosa que puedes probar: usar @at-root para teletransportarse fuera de tu árbol de anidamiento. Por ejemplo:

.wrapper{
    h1{
        @at-root .wrapper .active h1 {
            color: red;
        }
    }
}

Esto debería compilar hasta lo siguiente:

.wrapper .active h1 {
  color: red;
}

Lo bueno es que usted mantiene su selector donde lógicamente tiene sentido en la estructura de anidamiento para propósitos de organización.

Answer 2

A partir de este momento, no hay un selector de Sass para el padre directo en lugar del padre de la raíz de un elemento. Hay & que (como usted sabe) selecciona la raíz principal. También hay % selectores de marcadores de posición que ocultan una regla hasta que se ha extended .

Sass es de open-sourced , por lo que podría contribuir con un nuevo selector "directo principal".

Answer 3

Necesitas envolver el contenido @ at-root en {}

.wrapper {
    h1 {
        @at-root {
           .wrapper .active h1 {
                color: red;
           }
        }
    }
}

Answer 4

Puedes solucionar esto hoy con una mezcla como esta:

@mixin if-direct-parent($parent-selector) {
  $current-sequences: &;
  $new-sequences: ();

  @each $sequence in $current-sequences {
    $current-selector: nth($sequence, -1);
    $prepended-selector: join($parent-selector, $current-selector);
    $new-sequence: set-nth($sequence, -1, $prepended-selector);
    $new-sequences: append($new-sequences, $new-sequence, comma);
  }

  @at-root #{$new-sequences} {
    @content;
  }
}

Dado que & es esencialmente una lista de listas, puede usar las funciones de lista ( nth , set-nth , join y append ) para crear la secuencia de selección que desee. Luego use @at-root para generar el nuevo selector en el nivel de raíz. Así es como lo usarías:

.grandparent-1,
.grandparent-2 {
  color: red;

  .child {
    color: blue;

    @include if-direct-parent(''.parent'') {
      color: green;
    }
  }
}

Que saldrá:

.grandparent-1,
.grandparent-2 {
  color: red;
}
.grandparent-1 .child,
.grandparent-2 .child {
  color: blue;
}
.grandparent-1 .parent .child, .grandparent-2 .parent .child {
  color: green;
}