Skip to content

Instantly share code, notes, and snippets.

@tolja
Created November 5, 2014 22:52
Show Gist options
  • Save tolja/39f72a243e8f378d072a to your computer and use it in GitHub Desktop.
Save tolja/39f72a243e8f378d072a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<ul>
<li><h1>SASS</h1></li>
<li><h2>ist</h2></li>
<li><h3>TOLL</h3></li>
</ul>
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
// Mixin ohne Argumente
// im CSS Code nicht sichtbar
@mixin blue_text {
color: #336699;
font-family: helvetica, arial, sans-serif;
font-size: 15px }
.header,.footer,.div {
@include blue_text;
}
// extend
// Selektor und Eigenschaften für extend
// wird im CSS angezeigt, also sinnvoll
// diesen Selektor auch zu verwenden
/* Alle Elemente haben die selben
Attribute und Eigenschaften */
.blue_text {
color: #336699;
font-family: helvetica, arial, sans-serif;
font-size: 15px;
}
// Extend für mehrere Selektoren
.header,.footer, .div {
@extend .blue_text;
}
// Extend als Placeholder
%blue_text {
color: #336699;
font-family: helvetica, arial, sans-serif;
font-size: 15px
}
// Mixin mit Variablen
@mixin blue_text2($fontsize,$color) {
color: $color;
font: {
family: Helvetica, arial, sans-serif;
size: $fontsize;
}
}
/* Mixin mit Variablen */
.header {
@include blue_text2(15px,#336699);
}
.footer {
@include blue_text2(12px,#353324);
}
.div {
@include blue_text2(8px,#786435);
}
// Fazit: extend bei statischen Werten,
// die teilweise überschrieben werden
// mixin bei dynamischen Werten, die
// jederzeit verändert werden können
.header, .footer, .div {
color: #336699;
font-family: helvetica, arial, sans-serif;
font-size: 15px;
}
/* Alle Elemente haben die selben
Attribute und Eigenschaften */
.blue_text, .header, .footer, .div {
color: #336699;
font-family: helvetica, arial, sans-serif;
font-size: 15px;
}
/* Mixin mit Variablen */
.header {
color: #336699;
font-family: Helvetica, arial, sans-serif;
font-size: 15px;
}
.footer {
color: #353324;
font-family: Helvetica, arial, sans-serif;
font-size: 12px;
}
.div {
color: #786435;
font-family: Helvetica, arial, sans-serif;
font-size: 8px;
}
<ul>
<li><h1>SASS</h1></li>
<li><h2>ist</h2></li>
<li><h3>TOLL</h3></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment