Compass Columns

Provides a mixin for the CSS3 Multi-column layout module. See CSS3 spec: Multi-colum layout module.

This file can be imported using: @import "compass/css3/columns"

View the Source for this module on Github.

Examples

Columns
css3 mixin for css columns

Imports

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

  1. CSS3 Utilities

Mixins

View Source: Sass | SCSS 

=column-count($n)
  +experimental(column-count, $n, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin column-count($n) {
  @include experimental(column-count, $n, -moz, -webkit, -o, not -ms, not -khtml, official); }

Specify the number of columns

View Source: Sass | SCSS 

=column-gap($u)
  +experimental(column-gap, $u, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin column-gap($u) {
  @include experimental(column-gap, $u, -moz, -webkit, -o, not -ms, not -khtml, official); }

Specify the gap between columns e.g. 20px

View Source: Sass | SCSS 

=column-width($u)
  +experimental(column-width, $u, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin column-width($u) {
  @include experimental(column-width, $u, -moz, -webkit, -o, not -ms, not -khtml, official); }

Specify the width of columns e.g. 100px

View Source: Sass | SCSS 

=column-rule-width($w)
  +experimental(rule-width, $w, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin column-rule-width($w) {
  @include experimental(rule-width, $w, -moz, -webkit, -o, not -ms, not -khtml, official); }

Specify the width of the rule between columns e.g. 1px

View Source: Sass | SCSS 

=column-rule-style($s)
  +experimental(rule-style, unquote($s), -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin column-rule-style($s) {
  @include experimental(rule-style, unquote($s), -moz, -webkit, -o, not -ms, not -khtml, official); }

Specify the style of the rule between columns e.g. dotted. This works like border-style.

View Source: Sass | SCSS 

=column-rule-color($c)
  +experimental(rule-color, unquote($s), -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin column-rule-color($c) {
  @include experimental(rule-color, unquote($s), -moz, -webkit, -o, not -ms, not -khtml, official); }

Specify the style of the rule between columns e.g. dotted. This works like border-color.

View Source: Sass | SCSS 

=column-rule($w, $s: solid, $c: black)
  +experimental(column-rule, $w $s $c, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin column-rule($w, $s: solid, $c: black) {
  @include experimental(column-rule, $w $s $c, -moz, -webkit, -o, not -ms, not -khtml, official); }

Mixin encompassing all column rule rules For example:

+column-rule(1px, solid, #c00)