Compass Background Clip

Provides a mixin for background-clip. See CSS3 spec: background-clip.

This file can be imported using: @import "compass/css3/background-clip"

Examples

Background Clip: See background-clip in action.

Imports

Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$background-clip-support-threshold `$critical-usage-threshold`

The the user threshold for background-clip support. Defaults to $critical-usage-threshold

$default-background-clip `padding-box`

The default border-box model: [border-box | padding-box | content-box]

Mixins

view source

background-clip

=background-clip($clip...)
  $output: ()
  $deprecated: ()
  @if length($clip) > 0
    @each $layer in $clip
      $output: append($output, unquote($layer), comma)
      $deprecated: append($deprecated, legacy-box($layer), comma)
  @else
    $output: $default-background-clip
    $deprecated: legacy-box($default-background-clip)
  +with-each-prefix(background-img-opts, $background-clip-support-threshold)
    @if $current-prefix == -moz or $current-prefix == -webkit
      // Legacy versions of Mozilla support a different syntax, prefixed.
      +prefix-prop(background-clip, $deprecated)
    @else
      +prefix-prop(background-clip, $output)

@mixin background-clip($clip...) {
  $output: ();
  $deprecated: ();
  @if length($clip) > 0 {
    @each $layer in $clip {
      $output: append($output, unquote($layer), comma);
      $deprecated: append($deprecated, legacy-box($layer), comma);
    }
  }
  @else {
    $output: $default-background-clip;
    $deprecated: legacy-box($default-background-clip);
  }
  @include with-each-prefix(background-img-opts, $background-clip-support-threshold) {
    @if $current-prefix == -moz or $current-prefix == -webkit {
      // Legacy versions of Mozilla support a different syntax, prefixed.
      @include prefix-prop(background-clip, $deprecated);
    }
    @else {
      @include prefix-prop(background-clip, $output);
    }
  }
}

Clip the background (image and color) at the edge of the padding, border, or content. $clip... : [padding-box | border-box | content-box]