Benutzer:Tlaub/Miro (Stylesheet-Sprache)
| Miro | |
|---|---|
| Erscheinungsjahr: | 2017 |
| Entwickler: | Tamino Laub |
| Aktuelle Version: | 0.2.0 Alpha (28. Mai 2017) |
| Typisierung: | dynamisch |
| Wichtige Implementierungen: | Java |
| Beeinflusst von: | Sass, Stylus |
| Betriebssystem: | plattformübergreifend |
| https://github.com/talaub/miro#miro- | |
Miro ist ein Präprozessor für die Stylesheet-Sprache CSS. Miro Code wird zu CSS kompiliert und kann so von einem Browser dargestellt werden. Miro wurde durch Sass beeinflusst.
Auch wenn sich Miro eng an bereits etablierte Sprachen wie Sass oder Stylus hält, richtet es sich an Menschen, die eher unerfahren mit CSS sind. Miro bringt dafür ein paar Features mit, die CSS-Regeln zum Beispiel automatisch mit Präfixen für die einzelnen Webbrowser ausstatten.
Merkmale
Variablen
Ein praktisches Feature ist die Möglichkeit oft verwendete Werte in Variablen zu speichern. So muss man sie nur an einer Stelle ändern.
$brand-color = #73AC21
$header-height = 50em
$font-main = 'Roboto', sans-serif
header
background-color $brand-color
height $header-height
font-family $font-main
wird dabei zu:
header {
background-color: #73ac21;
height: 50em;
font-family: 'Roboto' , sans-serif;
}
Verschachtelung
Um das wiederholte Schreiben von Selektoren zu vermeiden, gibt es in Miro die Möglichkeit Abhängigkeiten durch Einrückung auszudrücken. Es lassen sich also CSS-Regeln ineinander verschachteln.
header
width 100%
height 50px
div.green-box
width 300px
height 30px
background-color green
display block
a
text-decoration none
color white
&:hover
text-decoration underline
wird dabei zu:
header {
width: 100%;
height: 50px;
}
header div.green-box {
width: 300px;
height: 30px;
background-color: green;
display: block;
}
header div.green-box a {
text-decoration: none;
color: white;
}
header div.green-box a:hover {
text-decoration: underline;
}
Es ist außerdem möglich, Media-Queries direkt innerhalb eines Selektorenblocks anzugeben.
Mixins
Durch Mixins können oft verwendete Codeabschnitte eingespeichert und mit unterschiedlichen Werten eingefügt werden.
$mixin($x; $y)
padding-left $x
padding-top $y
article
$mixin(10px; 2em)
wird dabei zu:
article {
padding-left: 10px;
padding-top: 2em;
}
Siehe auch
Weblinks
Kategorie:Programmiersprache Kategorie:Stylesheet-Sprache Kategorie:Web-Entwicklung Kategorie:Java (Programmiersprache)
