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"

View the Source for this module on Github.

Examples

Background Clip

See background-clip in action.

Imports

The following sass files are automatically imported when you import this file:

1. CSS3 Utilities

Configurable Variables help

$default-background-clip

Value

padding-box

Description

The default value is padding-box — the box model used by modern browsers.

If you wish to do so, you can override the default constant with border-box

To override to the default border-box model, use this code:

$default-background-clip = border-box

Mixins

background-clip($clip)

=background-clip($clip: $default-background-clip)
  // webkit and mozilla use the deprecated short [border | padding]
  $clip: unquote($clip)
  $deprecated: $clip
  @if $clip == padding-box
    $deprecated: padding
  @if $clip == border-box
    $deprecated: border
  // Support for webkit and mozilla's use of the deprecated short form
  +experimental(background-clip, $deprecated, -moz, -webkit, not -o, not -ms, not -khtml, not official)
  +experimental(background-clip, $clip, not -moz, not -webkit, -o, -ms, -khtml, official)

@mixin background-clip($clip: $default-background-clip) {
  // webkit and mozilla use the deprecated short [border | padding]
  $clip: unquote($clip);
  $deprecated: $clip;
  @if $clip == padding-box {
    $deprecated: padding; }
  @if $clip == border-box {
    $deprecated: border; }
  // Support for webkit and mozilla's use of the deprecated short form
  @include experimental(background-clip, $deprecated, -moz, -webkit, not -o, not -ms, not -khtml, not official);
  @include experimental(background-clip, $clip, not -moz, not -webkit, -o, -ms, -khtml, official); }