SASS Schnellstart / SASS Schnellstart Modul 3 – SASS für Fortgeschrittene
0%
In Bearbeitung

SASS Schnellstart – Media-Directives

Die@media Direktive setzt die Stilregel für verschiedene Medientypen. Das @media Directive kann innerhalb des SASS Selektors verschachtelt werden, aber sie wird auf die oberste Ebene des Stylesheets gehoben.

Beispiel

Das folgende Beispiel demonstriert die Verwendung von @media in der SCSS Datei.

media.html

<!DOCTYPE html>
<html>
<head>
    <title>Beispiel Medien-Directive</title>
    <link rel="stylesheet" href="media.css" type="text/css" />
</head>
<body class="container">
    <h2>Beispiel Media-Directive</h2> <img src ..="/sass/bilder/logo.jpg" class="style">
</body>
</html>

media.scss

h2 {
  color: #77C1EF;
}

.style {
  width: 900px;

  @media screen and (orientation: portrait) {
    width: 500px;
    margin-left: 120px;
  }
}

Du kannst SASS anweisen, die Datei zu beobachten und das CSS zu aktualisieren, sobald sich die Datei ändert, indem du den folgenden Befehl verwendest:

sass --watch C:sass-tutoriallibsassmedia.scss:media.css

Als nächstes führst du den obigen Befehl aus; er wird die media.css Datei automatisch mit dem folgenden Code erstellen.

media.css

h2 {
  color: #00FFFF;
}

.style {
  width: 900px;
}

@media screen and (orientation: portrait) {
  .style {
    width: 500px;
    margin-left: 120px;
  }
}

Jetzt hast du gelernt, wie du mit Media-Directives in SASS arbeiten kannst. In der nächsten Lektion schließen wir diesen SASS-Schnellstart mit "Funktionen" ab.