Better argument names for the columns module, tests for the columns module, accept space separated args for the column-rule mixin.

This commit is contained in:
Chris Eppstein 2010-11-14 23:02:12 -08:00
parent 0e7bef6dbf
commit 412468d52a
4 changed files with 90 additions and 18 deletions

View File

@ -1,55 +1,60 @@
@import "shared";
// Specify the number of columns
@mixin column-count($n) {
@include experimental(column-count, $n,
@mixin column-count($count) {
@include experimental(column-count, $count,
-moz, -webkit, -o, not -ms, not -khtml, official
);
}
// Specify the gap between columns e.g. `20px`
@mixin column-gap($u) {
@include experimental(column-gap, $u,
@mixin column-gap($width) {
@include experimental(column-gap, $width,
-moz, -webkit, -o, not -ms, not -khtml, official
);
}
// Specify the width of columns e.g. `100px`
@mixin column-width($u) {
@include experimental(column-width, $u,
@mixin column-width($width) {
@include experimental(column-width, $width,
-moz, -webkit, -o, not -ms, not -khtml, official
);
}
// Specify the width of the rule between columns e.g. `1px`
@mixin column-rule-width($w) {
@include experimental(rule-width, $w,
@mixin column-rule-width($width) {
@include experimental(rule-width, $width,
-moz, -webkit, -o, not -ms, not -khtml, official
);
}
// Specify the style of the rule between columns e.g. `dotted`.
// This works like border-style.
@mixin column-rule-style($s) {
@include experimental(rule-style, unquote($s),
@mixin column-rule-style($style) {
@include experimental(rule-style, unquote($style),
-moz, -webkit, -o, not -ms, not -khtml, official
);
}
// Specify the style of the rule between columns e.g. `dotted`.
// Specify the color of the rule between columns e.g. `blue`.
// This works like border-color.
@mixin column-rule-color($c) {
@include experimental(rule-color, unquote($s),
@mixin column-rule-color($color) {
@include experimental(rule-color, $color,
-moz, -webkit, -o, not -ms, not -khtml, official
);
}
// Mixin encompassing all column rule rules
// Mixin encompassing all column rule properties
// For example:
// +column-rule(1px, solid, #c00)
@mixin column-rule($w, $s: solid, $c: black) {
@include experimental(column-rule, $w $s $c,
//
// @include column-rule(1px, solid, #c00)
//
// Or the values can be space separated:
//
// @include column-rule(1px solid #c00)
@mixin column-rule($width, $style: false, $color: false) {
$full : -compass-space-list(compact($width, $style, $color));
@include experimental(column-rule, $full,
-moz, -webkit, -o, not -ms, not -khtml, official
);
}

View File

@ -328,6 +328,16 @@ module Compass::SassExtensions::Functions::GradientSupport
end
end
def _compass_space_list(list)
if list.is_a?(List) && !list.is_a?(SpaceList)
SpaceList.new(*list.values)
elsif list.is_a?(SpaceList)
list
else
SpaceList.new(list)
end
end
# slice a sublist from a list
def _compass_slice(list, start_index, end_index = nil)
end_index ||= Sass::Script::Number.new(-1)

View File

@ -0,0 +1,47 @@
.column-count {
-moz-column-count: 5;
-webkit-column-count: 5;
-o-column-count: 5;
column-count: 5; }
.column-gap {
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
-o-column-gap: 10px;
column-gap: 10px; }
.column-width {
-moz-column-width: 90px;
-webkit-column-width: 90px;
-o-column-width: 90px;
column-width: 90px; }
.column-rule-width {
-moz-rule-width: 1px;
-webkit-rule-width: 1px;
-o-rule-width: 1px;
rule-width: 1px; }
.column-rule-style {
-moz-rule-style: dotted;
-webkit-rule-style: dotted;
-o-rule-style: dotted;
rule-style: dotted; }
.column-rule-color {
-moz-rule-color: blue;
-webkit-rule-color: blue;
-o-rule-color: blue;
rule-color: blue; }
.column-rule {
-moz-column-rule: 1px solid blue;
-webkit-column-rule: 1px solid blue;
-o-column-rule: 1px solid blue;
column-rule: 1px solid blue; }
.column-rule-spaced {
-moz-column-rule: 1px solid blue;
-webkit-column-rule: 1px solid blue;
-o-column-rule: 1px solid blue;
column-rule: 1px solid blue; }

View File

@ -0,0 +1,10 @@
@import "compass/css3/columns";
.column-count { @include column-count(5); }
.column-gap { @include column-gap(10px); }
.column-width { @include column-width(90px); }
.column-rule-width { @include column-rule-width(1px); }
.column-rule-style { @include column-rule-style(dotted); }
.column-rule-color { @include column-rule-color(blue); }
.column-rule { @include column-rule(1px, solid, blue); }
.column-rule-spaced { @include column-rule(1px solid blue); }