Generated by SassMeister.com.

Compass-Background-Clip.html

<header>
  <h1>Compass CSS3: background-clip</h1>
  <p>In diesem Pen wird die Verwendung des Background-Clip Mixins gezeigt.</p>
</header>
<section class="border-box">
  <h1>background-clip: border-box</h1>
  <p>Dieses Element verwendet die Eigenschaft »border-box»</p>
  <code>@include background-clip(border-box);</code>
</section>
<section class="padding-box">
  <h1>background-clip: padding-box</h1>
  <p>Dieses Element demonstriert die Verwendung der Eigenschaft «padding-box»</p>
  <code>@include background-clip(padding-box);</code>
</section>
<section class="content-box">
  <h1>background-clip: content-box</h1>
  <p>Dieses Element demonstriert die Verwendung der Eigenschaft «content-box»</p>
  <code>@include background-clip(content-box);</code>
</section>

SassMeister-input.scss

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

@import "compass";

%element {
  border: 1em solid rgba(100, 100, 200, 0.5);
  background-color: rgb(200,100,200);
  margin-bottom: 1em;
  padding: 1em;
}

.border-box {
  @extend %element;
  @include background-clip(border-box);
}

.padding-box {
  @extend %element;
  @include background-clip(padding-box);
}

.content-box {
  @extend %element;
  @include background-clip(content-box);
}

SassMeister-output.css

.border-box, .padding-box, .content-box {
  border: 1em solid rgba(100, 100, 200, 0.5);
  background-color: #c864c8;
  margin-bottom: 1em;
  padding: 1em;
}

.border-box {
  -moz-background-clip: border;
  -o-background-clip: border-box;
  -webkit-background-clip: border;
  background-clip: border-box;
}

.padding-box {
  -moz-background-clip: padding;
  -o-background-clip: padding-box;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.content-box {
  -moz-background-clip: content;
  -o-background-clip: content-box;
  -webkit-background-clip: content;
  background-clip: content-box;
}

SassMeister-rendered.html

<header>
  <h1>Compass CSS3: background-clip</h1>
  <p>In diesem Pen wird die Verwendung des Background-Clip Mixins gezeigt.</p>
</header>
<section class="border-box">
  <h1>background-clip: border-box</h1>
  <p>Dieses Element verwendet die Eigenschaft »border-box»</p>
  <code>@include background-clip(border-box);</code>
</section>
<section class="padding-box">
  <h1>background-clip: padding-box</h1>
  <p>Dieses Element demonstriert die Verwendung der Eigenschaft «padding-box»</p>
  <code>@include background-clip(padding-box);</code>
</section>
<section class="content-box">
  <h1>background-clip: content-box</h1>
  <p>Dieses Element demonstriert die Verwendung der Eigenschaft «content-box»</p>
  <code>@include background-clip(content-box);</code>
</section>