Benutzer:Tlaub/Miro (Stylesheet-Sprache)

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.

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;
}

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
width100%
height50px
div.green-box
width300px
height30px
background-colorgreen
displayblock
a
text-decorationnone
colorwhite
&:hover
text-decorationunderline

wird dabei zu:

header{
width:100%;
height:50px;
}
headerdiv.green-box{
width:300px;
height:30px;
background-color:green;
display:block;
}
headerdiv.green-boxa{
text-decoration:none;
color:white;
}
headerdiv.green-boxa:hover{
text-decoration:underline;
}

Es ist außerdem möglich, Media-Queries direkt innerhalb eines Selektorenblocks anzugeben.

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;
}

• Stylus (Stylesheet-Sprache)
• Sass (Stylesheet-Sprache)
• Less (Stylesheet-Sprache)

• https://github.com/talaub/miro#miro-

Kategorie:Programmiersprache Kategorie:Stylesheet-Sprache Kategorie:Web-Entwicklung Kategorie:Java (Programmiersprache)