CSS irgendwie zuweisen/übernehmen/vererben

[Gunnar Bittersmann]

@@dedlfix

%gemeinsames {
  grid-column: 1/3;
}

.header {
  @extend %gemeinsames;
}

@media screen and (max-width:425px)
{
  .content {
    @extend %gemeinsames;
  }
}

Getestet hast du das aber nicht‽ Bspw. in SassMeister:

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

Das ginge nur mit Mixin:

@mixin gemeinsames {
  grid-column: 1/3;
}

.header {
  @include gemeinsames;
}

@media screen and (max-width:425px)
{
  .content {
    @include gemeinsames;
  }
}

Und immer noch die Frage: was ginge damit, was ohne [Sass] nicht ginge? Vanilla CSS:

:root {
  --gemeinsames: 1/3;
}

.header {
  grid-column: var(--gemeinsames);
}

@media screen and (max-width:425px)
{
  .content {
    grid-column: var(--gemeinsames);
  }
}

Aber auch das würde man anders machen, bspw. so:

.container {
  display: grid;
  grid-template-columns: [full-start] 62fr 38fr [full-end];
}

.header {
  grid-column: full;
}

@media screen and (max-width:425px)
{
  .content {
    grid-column: full;
  }
}

LLAP 🖖

PS: Die ganzen Fehler hab ich mal unkorrigiert gelassen:

• Verwendung von px anstatt em

• Verwendung von Klassen wie "header" und "content", die bei vernünfitgem Markup mit Elementen <header> und <main> obsolet sind.