SCSS und CSS

Hey! Ich arbeite aktuell an dem neuem Design und habe nun die PC- & Handy-Version öffentlich gestellt. Die Tablett-Version werde ich die Tage entwickeln, um die Website responsive für alle anzubieten. Solltest du Design-Bugs finden, kannst du diese gern hier melden.

Hey,


in diesem Tutorial beschäftigen wir uns mal kurz mit SCSS und CSS.


SCSS ist eine Skriptsprache, die eine CSS-ähnliche Syntax aufweist und beim Laden in CSS kompiliert wird. Es bietet viele großartige Ergänzungen zu CSS wie Verschachtelung von Deklarationen und Variablen. Um noch besser in das Themengebiet einsteigen zu können, empfielt es sich, den offiziellen Leitfaden zu lesen.


Ihr könnt .scss-Datein auch nur mit reinem CSS Code erstellen und es wird einbandfrei funktionieren. Es wird nicht unbedingt immer ein SCSS Code benötigt.

Bitte erstellt eure Style-Datein in einem Unterverzeichnis im file/ Verzeichnis, z.B. style/layout/pageHeader.scss



Medienunterbrechungspunkte

Medienhaltepunkte weisen den Browser an, abhängig von den Abmessungen des Darstellungsbereichs unterschiedliche CSS-Codes anzuwenden, wie z.B. das Bereitstellen eines anderen Styles auf dem PC als auf dem Smartphone.




Verfügbare Medienunterbrechungspunkte

Hinweis: Einige sehr große Smartphones, wie z. B. das Apple iPhone 7 Plus, stimmen bei der Querformatanzeige mit der Medienabfrage für Tablets überein.




Name Geräte gleichwertige @media-Angabe
screen-xs
nur Smartphones
(max-width: 544px)
screen-sm
Tablets (min-width: 545px) and (max-width: 768px)
screen-sm-down Tablets und Smartphones
(max-width: 768px)
screen-sm-up Tablets und PC
(min-width: 545px)
screen-sm-md nur Tablets
(min-width: 545px) and (max-width: 1024px)
screen-md Tablets (min-width: 769px) and (max-width: 1024px)
screen-md-down Smartphone und Tablets
(max-width: 1024px)
screen-md-up Tablets und PC
(min-width: 769px)
screen-lg PC (min-width: 1025px)