Sass "&" uitbreiden inplaats van nesten.

[Ed Vertijsment]

Mijn vraag

Kan ik in sass (scss) een selector uitbreiden met de parent (&) zonder interpolation?

Ik vind het lastig de vraag goed te formuleren (dat maakt zoeken ook wat lastiger) maar hier een wat uitgebreidere beschrijving:

Ik heb deze code structuur (versimpelt):

SCSS:

@mixin bar {
  @at-root .root & {
     font-family: foobar;
  }
}

.one,
.two {
  .foo {
    @include bar;
  }
}

Gecompileerd ziet dit er als volgt uit:

Cascading Stylesheet:

.root .one .foo,
.root .two .foo {
  font-family: foobar;
}

Nu is het echter zo dat .one en .two op hetzelfde element worden gezet als .root en dus niet genest zijn. De selector zou dus ".root.one .foo, .root.two .foo" moeten zijn.

Het komt wel vaker voor dat je in (minder ideale) scenario's een selector wilt uitbreiden met het geen er in een variabele of in de parent (&) zit. In dat geval kan je interpolation "#{&}" gebruiken aangezien direct aansluiten (".root&") niet mag. Maar als ik dat die in scss:

SCSS:

@mixin bar {
  @at-root .root#{&} {
     font-family: foobar;
  }
}

.one,
.two {
  .foo {
    @include bar;
  }
}

Krijg ik:

Cascading Stylesheet:

.root.one .foo, .two .foo {
  font-family: foobar;
}

En dat gaat dus mis: ".two .foo" heeft niet ".root" meegekregen. Waarschijnlijk door de volgorde waarin "&" expressies worden geëvalueerd.

Nu heb ik een workaround gevonden voor dit specifieke probleem maar ik vraag mij of er nou echt geen betere manier om "&" aan een selector te pakken zonder interpolations wat ik sowieso al lelijk vindt.

Relevante software en hardware die ik gebruik

node-sass 4.9.0 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]

Wat ik al gevonden of geprobeerd heb

Sass documentatie, google zoekopdrachten, en old-school trial and error, geen antwoord gevonden.

[Tsjilp]

.root& mag niet, maar &.root mag wel en is in dit geval hetzelfde

Ah toch niet, sorry

[Voor 14% gewijzigd door Tsjilp op 28-10-2018 18:21]

[Spinal]

Ed Vertijsment schreef op vrijdag 26 oktober 2018 @ 15:06:
[...]
En dat gaat dus mis: ".two .foo" heeft niet ".root" meegekregen. Waarschijnlijk door de volgorde waarin "&" expressies worden geëvalueerd.
[...]

Of het is een bug in libsass. Heb je het hun al gevraagd?

[Ed Vertijsment]

Spinal schreef op maandag 29 oktober 2018 @ 09:01:
[...]

Of het is een bug in libsass. Heb je het hun al gevraagd?

Het lijkt me niet da, dat het geval is. Als ik het met verschillende sass compilers probeer krijg ik iedere keer hetzelfde: https://www.sassmeister.c...b3b6b146f7551801fd65a8403

[Tsjilp]

Ik denk dat het min of meer 'by design' is. De @at-root selector stapt gewoon uit de huidige scope en plaatst alleen alles in de root, en plempt je css selectors daar gewoon achter, maar houdt geen rekening met multiple selectors.
Ik ben bang dat je het anders aan zult moeten vliegen.

Kun je uitleggen waarom je het specifiek zo nodig hebt? Is er niet een andere oplossing voorhanden?

[Ed Vertijsment]

Tsjilp schreef op maandag 29 oktober 2018 @ 11:39:
Ik denk dat het min of meer 'by design' is. De @at-root selector stapt gewoon uit de huidige scope en plaatst alleen alles in de root, en plempt je css selectors daar gewoon achter, maar houdt geen rekening met multiple selectors.
Ik ben bang dat je het anders aan zult moeten vliegen.

Kun je uitleggen waarom je het specifiek zo nodig hebt? Is er niet een andere oplossing voorhanden?

In mij oorspronkelijk post gaf ik al aan dat voor dit specifieke probleem al een oplossing had gevonden. Ik vraag mij gewoon af of er een betere manier is om hiermee om te gaan aangezien in ik interpolation an sich al een lelijke manier van werken vindt.

De workaround:

SCSS:

@mixin bar {
  $this: &;
  
  @at-root .root {
    &#{$this} {
     font-family: foobar;
    }
  }
}

.one,
.two {
  .foo {
    @include bar;
  }
}

Cascading Stylesheet:

.root.one .foo, .root .two .foo {
  font-family: foobar;
}

Update, hey, two lijkt nog steeds stuk...