Erste Schritte mit Mythos, dem zukünftigen Präprozessor

Mythos ist ein CSS-Präprozessor, mit dem Sie jetzt neue und experimentelle CSS-Funktionen in Ihren Projekten verwenden können.

Warum Mythos?


Mit Mythos können Sie sogar die CSS-Eigenschaften voll ausnutzen, die von W3C noch in der Entwicklung sind und von der überwiegenden Mehrheit der Browser nicht unterstützt werden. Der Hauptvorteil gegenüber anderen Präprozessoren besteht jedoch darin, dass Sie keine neue Auszeichnungssprache lernen müssen, wie dies bei SASS oder LESS der Fall ist. Mythos verwendet Standard-CSS-Markup. Daher müssen Sie nichts umschreiben, wenn Unterstützung für bestimmte Eigenschaften in Browsern angezeigt wird, sondern nur vorhandene Stile neu kompilieren. Dies dauert in der Regel nur einige Sekunden. Den Rest erledigt Myth für Sie.

Hier sind einige CSS-Funktionen, die derzeit in Mythos verfügbar sind:



Beispiel


Hier ist ein kleines CSS-Beispiel mit Mythos, das Eigenschaften enthält, die von den meisten Browsern noch nicht unterstützt werden:

:root {
  --bgcolor: #0072bc;
  --textcolor: color(var(--bgcolor) lightness(85%));
}
.button {
  display: block;
  width: 90%;
  max-width: 220px;
  padding: 10px;
  background: var(--bgcolor);
  color: var(--textcolor);
  border-radius: 6px;
  transition: background-color 0.4s ease-out,
              color 0.3s ease-out;
}

Nach der Kompilierung konvertiert Myth dieses Beispiel so, dass die meisten Browser es richtig verstehen:

.button {
  display: block;
  width: 90%;
  max-width: 220px;
  padding: 10px;
  background: #0072bc;
  color: rgb(179, 224, 255);
  border-radius: 6px;
  -webkit-transition: background-color 0.4s ease-out,
                      color 0.3s ease-out;
  transition: background-color 0.4s ease-out,
              color 0.3s ease-out;
}


Mythos Installation


Zuerst müssen Sie node.js mit dem Installationsassistenten installieren . Führen Sie anschließend die Eingabeaufforderung Node.js aus:

Bild

Verwenden Sie zur Installation von Myth npm (den Standard-Paketmanager von Node.js). Führen Sie den folgenden Befehl aus:

npm install -g myth

Bild

Wenn die Installation von Mythos korrekt abgeschlossen wurde, sollten wir so etwas sehen:

Bild

Erstellen Sie Responsive Design mit Mythos


Lassen Sie uns mit Myth:

Bild
Demo Sources ein einfaches responsives Markup erstellen


Erklärung


So sieht die Ordnerstruktur dieser Demo aus:

/demo/
|-- /css/
  |-- dev.css
  |-- styles.css
  |-- styles.min.css
|-- /images/
|-- index.html

  • Der Ordner / css / enthält Dateien mit den Stilen unseres Projekts
    • dev.css - Eingabestildatei, mit der wir arbeiten
    • styles.css - neu kompilierter Mythos, die Ausgabestildatei, die die Site an den Browser weiterleitet
    • styles.min.css - Verkleinerte Version von styles.css

  • / images / - In unserem Projekt verwendete Grafiken.
  • index.html - und natürlich die Seite, an der wir arbeiten


Verknüpfen von Eingabe- und Ausgabedateien


Wir werden den folgenden Node.js-Befehl verwenden, um zu der Stelle zu gelangen, an der sich unsere Stile befinden:

cd /path/to/your/folder/css

Dabei ist / path / to / your / folder / css der tatsächliche Pfad zu den Stildateien auf dem lokalen Computer oder Server. Der nächste Schritt besteht darin, Myth zu sagen, dass dev.css die Datei ist, mit der wir arbeiten werden, und styles.css die endgültige Datei, in die Myth bei jeder Änderung unsere Stile automatisch kompiliert:

myth --watch dev.css styles.css

Wenn Sie sich kompilieren möchten, entfernen Sie --watch:

myth dev.css styles.css

Beachten Sie, dass dev.css bereits vorhanden sein muss, während styles.css automatisch erstellt wird, wenn es nicht gefunden wird. Natürlich können Sie für Ihre Dateien beliebige Namen verwenden, und nicht nur die in diesem Beispiel berücksichtigten.

CSS-Mythos hinzufügen


Um das Markup unseres Beispiels zu sehen, können Sie sich die Quelle ansehen. Nachfolgend finden Sie den Inhalt von dev.css. Wie Sie sehen, werden experimentelle Funktionen wie Variablen, benutzerdefinierte Medienabfragen und die color () -Funktion verwendet:

:root {
  --max-width: 960px;
  --gutter: 2%;
  --base-size: 17px;
  --small-size: 14px;
  --base-lineheight: 1.4;
  --default-color: #464646;
  --default-bgcolor: #fff;
  --link-color: #0072bc;
  --dark-bgcolor: #759ea1;
  --dark-bgcolor-text-color: color(var(--dark-bgcolor) lightness(85%));
  --highlight-color: firebrick;
}
@custom-media --small-devices (max-width: 400px);
@custom-media --medium-devices (min-width: 401px) and (max-width: 750px);
* { 
  margin: 0;
  padding: 0;
}
body {
  background: var(--default-bgcolor);
  color: var(--default-color);
  font: normal var(--base-size)/var(--base-lineheight) "Roboto", sans-serif;
  text-align: center;
}
img {
  width: 100%;
  height: auto;
}
/* Typography */
h1, h2, h3, p {
  margin: 5px auto 20px auto;
}
h1 {
  font-size: calc(var(--base-size) * 3);
  line-height: calc((var(--base-size) * 3) * var(--base-lineheight));
}
h2 {
  font-size: calc(var(--base-size) * 2);
  font-weight: 400;
  line-height: calc((var(--base-size) * 2) * var(--base-lineheight));
  color: color(var(--highlight-color) saturation(-20%));
}
h3 {
  font-size: calc(var(--base-size) * 1.2);
  font-weight: 400;
  line-height: calc((var(--base-size) * 1.2) * var(--base-lineheight));
  color: color(var(--highlight-color) saturation(+50%));
}
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease-in;
}
a:hover {
  color: color(var(--link-color) lightness(-10%));
  transition: color 0.4s ease-out;
}
/* Layout */
header {
  display: block;
  width: 100%;
  min-height: 500px;
  padding-top: 100px;
  background: var(--dark-bgcolor)
              url(header-bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--dark-bgcolor-text-color);  
}
.container {
  position: relative;
  width: 96%;
  max-width: var(--max-width);
  margin: 0 auto;
}
.fullcol, .halfcol, .fourthcol {
  float: left;
  box-sizing: border-box;
  margin-left: var(--gutter); 
}
.container .fullcol,
.container .halfcol:first-child,
.container .fourthcol:first-child  {
  margin-left: 0;
}
.fullcol {
  width: 100%;
  text-align: center;
}
.halfcol {
  width: calc((100% - var(--gutter)) / 2);
}
.fourthcol {
  width: calc(((100% - (var(--gutter) * 3)) / 4));
}
section {
  float: left;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
}
/* Special */
.logo {
  margin-top: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
}
.tagline {
  text-transform: uppercase;
}
.button {
  display: block;
  width: 90%;
  max-width: 220px;
  margin: 30px auto 50px auto;
  background: var(--link-color);
  color: var(--dark-bgcolor-text-color);
  border-radius: 6px;
  padding: 10px;
  transition: background-color 0.4s ease-out, color 0.3s ease-out;
}
.button:hover {
  background: color(var(--link-color) tint(50%));
  color: color(var(--dark-bgcolor-text-color) whiteness(100%));
  transition: background-color 0.3s ease-in, color 0.2s ease-in;
}
.credits {
  margin: 80px auto 20px auto;
  font-size: calc(var(--base-size) * 0.75);
  color: color(var(--dark-bgcolor-text-color) hue(+120%));
}
#work {
  background: color(var(--dark-bgcolor) lightness(+30%));
}
#contact {
  background: color(var(--highlight-color) saturation(-30%));
  color: var(--dark-bgcolor-text-color);
}
#contact h2 {
  color: color(var(--dark-bgcolor-text-color) saturation(+20%));
}
/* Media Queries */
@media (--small-devices) {
  .fullcol, .halfcol, .fourthcol {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .button, .tagline {
    font-size: var(--small-size);
  }
  .logo {
    margin-top: 0;
    font-size: calc(var(--base-size) * 1.8);
    line-height: calc((var(--base-size) * 1.8) * var(--base-lineheight));
  }
}
@media (--medium-devices) {
  .fourthcol {
    width: calc((100% - var(--gutter)) / 2);
    margin-left: var(--gutter);
    margin-bottom: 20px;
  }
  .container .fourthcol:nth-child(odd) {
    margin-left: 0;
    clear: left;
  }
}


Debuggen


Wenn Sie mit Mythos arbeiten, werden im Fehlerfall Informationen zu diesen in der Befehlszeile von Node.js angezeigt, sodass es als Debugging-Tool betrachtet werden kann. Wenn beispielsweise keine benutzerdefinierte Medienabfrage angekündigt wurde, wird das folgende Bild angezeigt:

Bild

Falls ein Fehler auftritt, werden Sie vom Mythos-Debugger mit den folgenden Informationen verwöhnt
  • was genau passiert ist;
  • In welcher Zeile geschah das?
  • was der Mythos als Reaktion auf den Fehler getan hat;
  • vorgeschlagene Lösungen für das Problem;


CSS-Optimierung für bessere Leistung


Sie können die Leistung verbessern, bevor Sie Ihre Site auf einem Webserver hosten, indem Sie Ihr Stylesheet minimieren (in eine Zeile schreiben). In Mythos wird dieser Prozess mit der Funktion --compress automatisiert und implementiert:

myth --compress dev.css styles.css

In unserem Beispiel wurde dadurch die Dateigröße um 20% reduziert.

Etwas mehr über Mythosbefehle


Teams können auch in Kurzform geschrieben werden. Zum Beispiel können Sie schreiben:

myth -c -w dev.css styles.css

Stattdessen:

myth --compress --watch dev.css styles.css

Weitere Informationen finden Sie in der Liste der Mannschaften auf der offiziellen Website.

Schlussfolgerungen


Mythos ist ein großartiger Präprozessor, perfekt für Entwickler, die alle experimentellen CSS-Funktionen nutzen möchten. Um mit Mythos zu arbeiten, müssen Sie keine weiteren Auszeichnungssprachen lernen, was natürlich ein großes Plus ist. Und schließlich werde ich Links zu den Demos und Quellen des Projekts duplizieren, die als Beispiel in diesem Artikel betrachtet wurden:

Demo-
Quellen

Übersetzungsquelle: www.sitepoint.com/getting-started-myth-preprocessor-future/

Jetzt auch beliebt: