Wir nutzen als Startercode wieder das Repo aus der Aufgabe CSS Grid. Sie werden Ihren bisherigen Stand weiter entwickeln. Legen Sie dafür einen neuen Zweig m-sass-refactoring an.
Integrieren Sie Stylelint, wie in der Codesnippet StyleLint Setup beschrieben.
Integrieren Sie SASS in das Projekt. Nutzen Sie dazu die Anleitung Integration von SASS.
Nehmen Sie sich 60 min um den bestehenden Code Mithilfe von SASS zu überarbeiten, um ihn flexibler, kompakter und übersichtlicher zu machen. Nutzen Sie dafür im Wesentlichen Nesting und den Parent Selector.
Setzen Sie nun das Layout wie im Filmchen gezeigt um. Die Idee zum Effekt stammt aus diesem Codepen CSS Flexbox Transition.