Generated by SassMeister.com.

SassMeister-input-HTML.html

<!-- <input type="button" 
class="blue_text" value="Button blau"/> --!>

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 {
  @include blue_text;
}
 
.footer {
  @include blue_text;
}
 
.div {
  @include blue_text;
}

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



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

SassMeister-output.css

.header {
  color: #336699;
  font-family: helvetica, arial, sans-serif;
  font-size: 15px;
}

.footer {
  color: #336699;
  font-family: helvetica, arial, sans-serif;
  font-size: 15px;
}

.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

<!-- <input type="button" 
class="blue_text" value="Button blau"/> --!>