Ich war gerade dabei, einiges an uraltem CSS, teilweise in less verpackt, aufzuräumen und in sass zu verpacken. Warum? Das alte Zeug ist nahezu unwartbar. Das ist meine Schuld (ich hätte früher mal aufräumen sollen - wobei CSS echt nicht dafür gedacht ist, gut aufräumbar zu sein), nicht die von less, aber damit ich nicht Teile von altem Lesscode neben neuen Teilen habe, und dann irgendwann garantiert durcheinander komme, wollte ich das neue Zeug in sass verpacken.

Soweit, so gut. Das klappt auch ziemlich problemlos, und wenn die unterschiedliche Variablensyntax nicht wäre, wäre es wirklich einfach.

Aber dann gibt es doch wieder Stellen, bei denen ich ins Grübeln komme. Eine davon betrifft den Vollbildmodus, und sieht in less ungefähr so aus (das firefoxspezifische Gehampel weggelassen, ebenso wie die Masse des Codes, die sich hinter .fullscreenmixin verbirgt).

  #nffullscreen:fullscreen {
     .fullscreenmixin;
  }
  #nffullscreen:-webkit-full-screen {
     .fullscreenmixin;
  }

Warum nur habe ich das damals (less) so geschrieben, und nicht so?:

  #nffullscreen:fullscreen, #nffullscreen:-webkit-full-screen {
     .%fullscreenmixin;
  }

So ist das doch kürzer…

Stimmt. Und sollte gleich gut funktionieren. Tut es aber nicht. Chrome 66 will getrennte Selektoren haben (heißt: die erste Variante). Muß man erst mal drauf kommen…

Aber Moment - wir schreiben 2018. Der Müll da oben ist von 2013… ob die Chrome-Leute das gefixt haben? Vielleicht ist auch der Prefix (-webkit-) nicht mehr nötig, gar die kaputte Schreibweise (full-screen statt fullscreen) geflickt?
Uwe… träum' weiter. Bis Chrome 66 ist nichts dergleichen passiert (auf den nehme ich noch Rücksicht). Seufz. Dass die ihren Browser immer weiter aufblähen sei ihnen ja gegönnt, aber warum kann nicht mal irgendetwas fertig gemacht werden?

Daher habe ich dann aus dem Less-Code Sass gemacht, und die beiden getrennten Selektoren beibehalten:

  #nffullscreen:fullscreen {
     @extend %fullscreenmixin;
  }
  #nffullscreen:-webkit-full-screen {
     @extend %fullscreenmixin;
  }

Funktioniert es?

Leider nein - Sass fasst die Selektoren automatisch zusammen. Das ist in 99,999% der Fälle auch richtig (kürzeres CSS ist gut) - nur hier nicht.

Ich schätze, den Code werde ich wohl nicht in Sass stecken können. Womit der Traum, das ganze CSS in einer Sprache zu haben, erledigt ist.