Compass Box Sizing

Provides a mixin for the box-sizing property, which allows you to change how the box model works. See W3C CSS3 spec: box-sizing.

This file can be imported using: @import "compass/css3/box-sizing"

Examples

Box-sizing

css3 mixin for box-sizing

Imports

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

Configurable Variables help

$box-sizing-support-threshold $critical-usage-threshold

The prefixed support threshold for box-sizing. Defaults to the $graceful-usage-threshold.

$default-box-sizing border-box

The default box-sizing model when no argument is provided to the box-sizing mixin: [ content-box | border-box | padding-box ]

The browser default is content-box, compass defaults to border-box.

Mixins

box-sizing($box-model)

=box-sizing($box-model: $default-box-sizing)
  $box-model: unquote($box-model)
  +prefixed-properties(css3-boxsizing, $box-sizing-support-threshold, (box-sizing: $box-model))

@mixin box-sizing($box-model: $default-box-sizing) {
  $box-model: unquote($box-model);
  @include prefixed-properties(css3-boxsizing, $box-sizing-support-threshold, (box-sizing: $box-model));
}

$box-model: [ content-box | border-box | padding-box ]