Index

Snap #04
Directive &

Le pointeur & conserve une référence au sélecteur courant. Que peut-on faire au-delà de son usage basique?

.a{
  .b & {
    color: red;
  }
  & .b{
    color: green;
  }
  &:hover, &.state--active{
    color: blue;
  }
}

Est compilé en :

.b .a{
  color: red;
}
.a .b{
  color: green;
}
.a:hover, .a.state--active{
  color: blue;
}

Conserver la référence au bloc (BEM)

Pour en savoir plus sur la méthodologie BEM

.custom-block {
  $main-block: &;
  &__header{
    color: green;
    #{$main-block}__info{
        color: red;
    }
  }
}

Est compilé en :

.custom-block__header {
  display: inline-block;
}
.custom-block__header .custom-block__info {
  color: red;
}

Modification par un élément parent

.custom-block {
  color: red;
  background-color: white;

  @at-root body.mod--inverted-colors &{
    color: white;
    background-color: red;
  }
}

Est compilé en :

.custom-block {
  color: red;
  background-color: white;
}
body.mod--inverted-colors .custom-block {
  color: white;
  background-color: red;
}