Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul>
    <li><h1>SASS</h1></li>
    <li><h2>ist</h2></li>
    <li><h3>TOLL</h3></li>
  
</ul>

SassMeister-input.scss

// ----
// 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

SassMeister-output.css

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

SassMeister-rendered.html

<ul>
    <li><h1>SASS</h1></li>
    <li><h2>ist</h2></li>
    <li><h3>TOLL</h3></li>
  
</ul>