11.1 Sass (Syntactically Awesome Stylesheets)
Präprozessoren für CSS — das sind Tools, die die Möglichkeiten von CSS erweitern und den Prozess des Schreibens von Styles vereinfachen. Sie fügen Funktionen hinzu wie Variablen, verschachtelte Regeln, Mixins und Funktionen, was den Code modularer, wiederverwendbar und leicht wartbar macht. Heute betrachten wir die beliebtesten CSS-Präprozessoren: Sass, LESS und Stylus.
Sass — einer der beliebtesten CSS-Präprozessoren, der viele nützliche Möglichkeiten für die Gestaltung hinzufügt.
Installation von Sass
Sass kann über npm installiert werden:
npm install -g sass
Grundfunktionen von Sass
1. Variablen
Variablen in Sass ermöglichen das Speichern von Werten, die wiederverwendet werden können:
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
</body>
</html>
$primary-color: #333
body
color: $primary-color
2. Verschachtelte Regeln
Verschachtelte Regeln ermöglichen das Schreiben von CSS in einem mehr hierarchischen Stil:
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</nav>
</body>
</html>
nav
background: #eee
ul
margin: 0
padding: 0
list-style: none
li
color: tomato
3. Mixins
Mixins ermöglichen die Erstellung von Stilgruppen, die in andere Regeln eingeschlossen werden können:
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Inhalt</div>
</body>
</html>
@mixin border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
.box
@include border-radius(10px)
border: 2px solid green
width: 256px
min-height: 200px
4. Vererbung
Vererbung ermöglicht einem Selektor, die Stile eines anderen zu erben:
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">Einige Infos</div>
<div class="box success">Erfolg</div>
<div class="box warning">Warnung!</div>
</div>
</body>
</html>
%message
border: 1px solid #ccc
padding: 10px
color: #333
.box
min-height: 120px
&:not(:last-child)
margin-bottom: 5px
.info
@extend %message
.success
@extend %message
background-color: #cfc
.warning
@extend %message
background-color: #fc9
5. Funktionen
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
@function px-to-rem($px, $base-font-size: 16px)
@return ($px / $base-font-size) * 1rem;
body
font-size: px-to-rem(18px);
Komplieren von Sass
Das Kompilieren von Sass in CSS erfolgt mit dem Befehl:
sass style.scss style.css
11.2 LESS
Installation von LESS
LESS kann über npm installiert werden:
npm install -g less
Grundfunktionen von LESS
1. Variablen:
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
</body>
</html>
@primary-color: #333;
body {
color: @primary-color;
}
2. Verschachtelte Regeln:
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</nav>
</body>
</html>
nav {
background: #eee;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
color: tomato;
}
}
}
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Inhalt</div>
</body>
</html>
3. Mixins:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box {
.border-radius(10px);
border: 2px solid green;
width: 256px;
min-height: 200px;
}
4. Vererbung:
LESS benutzt das "&"-Symbol für Verweise auf den Elternteil.
<html>
<head>
<style>
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<button>Button</button>
</body>
</html>
.button {
&:hover {
background-color: #555;
}
}
5. Funktionen:
LESS unterstützt Funktionen für Arbeiten mit Farben, Zahlen und Strings.
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
@base: 16px;
.font-size(@size) {
font-size: (@size / @base) * 1rem;
}
body {
.font-size(18px);
}
Komplieren von LESS
Das Kompilieren von LESS in CSS erfolgt mit dem Befehl:
lessc style.less style.css
11.3 Stylus
Stylus — das ist ein flexibler und kraftvoller CSS-Präprozessor, der eine prägnante Syntax und viele nützliche Funktionen bietet.
Installation von Stylus
Stylus kann über npm installiert werden:
npm install -g stylus
Grundfunktionen von Stylus
1. Variablen:
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
</body>
</html>
primary-color = #333
body
color primary-color
2. Verschachtelte Regeln:
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</nav>
</body>
</html>
nav
background #eee
ul
margin 0
padding 0
list-style none
li
color tomato
3. Mixins:
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Inhalt</div>
</body>
</html>
border-radius(radius)
-webkit-border-radius radius
-moz-border-radius radius
border-radius radius
.box
border-radius(10px)
border 2px solid green
width 256px
min-height 200px
4. Vererbung:
Stylus benutzt @extend für Vererbung.
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">Einige Infos</div>
<div class="box success">Erfolg</div>
<div class="box warning">Warnung!</div>
</div>
</body>
</html>
.message
border 1px solid #ccc
padding 10px
color #333
.info
@extend .message
.success
@extend .message
background-color #cfc
.warning
@extend .message
background-color #fc9
5. Funktionen:
Stylus ermöglicht die Erstellung von Funktionen zur Wiederverwendung.
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
px-to-rem(px, base-font-size = 16px)
px / base-font-size * 1rem
body
font-size px-to-rem(18px)
Komplieren von Stylus
Das Kompilieren von Stylus in CSS erfolgt mit dem Befehl:
stylus style.styl
GO TO FULL VERSION