From ca7563e3ba8d1b5fd6e60badb74d8c88263ca0ff Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sun, 14 Nov 2010 23:02:12 -0800 Subject: [PATCH] Better argument names for the columns module, tests for the columns module, accept space separated args for the column-rule mixin. --- .../stylesheets/compass/css3/_columns.scss | 41 +++++++++------- .../functions/gradient_support.rb | 10 ++++ .../stylesheets/compass/css/columns.css | 47 +++++++++++++++++++ .../stylesheets/compass/sass/columns.scss | 10 ++++ 4 files changed, 90 insertions(+), 18 deletions(-) create mode 100644 test/fixtures/stylesheets/compass/css/columns.css create mode 100644 test/fixtures/stylesheets/compass/sass/columns.scss diff --git a/frameworks/compass/stylesheets/compass/css3/_columns.scss b/frameworks/compass/stylesheets/compass/css3/_columns.scss index 520f57c0..18480013 100644 --- a/frameworks/compass/stylesheets/compass/css3/_columns.scss +++ b/frameworks/compass/stylesheets/compass/css3/_columns.scss @@ -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 ); } diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb index 776bfc0d..d43c1e51 100644 --- a/lib/compass/sass_extensions/functions/gradient_support.rb +++ b/lib/compass/sass_extensions/functions/gradient_support.rb @@ -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) diff --git a/test/fixtures/stylesheets/compass/css/columns.css b/test/fixtures/stylesheets/compass/css/columns.css new file mode 100644 index 00000000..c49d7ba6 --- /dev/null +++ b/test/fixtures/stylesheets/compass/css/columns.css @@ -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; } diff --git a/test/fixtures/stylesheets/compass/sass/columns.scss b/test/fixtures/stylesheets/compass/sass/columns.scss new file mode 100644 index 00000000..c66f71c2 --- /dev/null +++ b/test/fixtures/stylesheets/compass/sass/columns.scss @@ -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); }