Beispiel zur Verwendung eines Mixins in Sass Web Professional - CSS-Vertiefung

SASS-Mixins.html

<article id="s0">
    <h1>Artikel 0</h1>
    <p>Blah Blah...</p>
</article>
<article id="s1">
    <h1>Artikel 1</h1>
    <p>Blah Blah...</p>
</article>
<article id="s2">
    <h1>Artikel 2</h1>
    <p>Blah Blah...</p>
</article>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----

@mixin color-demo($color: black) {
    h1 {
        color: darken($color, 20);
    }
    
    p {
        color: lighten($color, 20);
    }
}

#s0 {
    @include color-demo();
}

#s1 {
    @include color-demo(blue);
}

#s2 {
    @include color-demo(green);
}

SassMeister-output.css

#s0 h1 {
  color: black;
}
#s0 p {
  color: #333333;
}

#s1 h1 {
  color: #000099;
}
#s1 p {
  color: #6666ff;
}

#s2 h1 {
  color: #001a00;
}
#s2 p {
  color: #00e600;
}

SassMeister-rendered.html

<article id="s0">
    <h1>Artikel 0</h1>
    <p>Blah Blah...</p>
</article>
<article id="s1">
    <h1>Artikel 1</h1>
    <p>Blah Blah...</p>
</article>
<article id="s2">
    <h1>Artikel 2</h1>
    <p>Blah Blah...</p>
</article>