compass-sass37 1.1.0

data/test/fixtures/stylesheets/compass/sass/gradients.sass

@@ -0,0 +1,128 @@
+@import compass/css3/images
+
+$svg-gradient-shim-threshold: 0
+
+.bg-shortcut-simple-image
+  +background(white url('foo.png'))
+
+.bg-shortcut-linear-gradient
+  +background(white linear-gradient(top left, #ddd, #aaa))
+
+.bg-shortcut-radial-gradient
+  +background(white radial-gradient(center center, #ddd, #aaa 100px))
+
+.bg-linear-gradient-angle-svg
+  +background-image(linear-gradient(-45deg, blue, black))
+
+.bg-linear-gradient-angle2-svg
+  +background-image(linear-gradient(top left, blue, black))
+
+.bg-all-gradient-types-with-simplification
+  +background-with-css2-fallback(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px), #ffcc00)
+
+.bg-simple-image
+  +background-image(url('foo.png'))
+
+.bg-linear-gradient
+  +background-image(linear-gradient(top left, #ddd, #aaa))
+
+.bg-linear-gradient-pixel-stop-from-top
+  +background-image(linear-gradient(top, #ddd 10px, #aaa 40px))
+
+.bg-linear-gradient-pixel-stop-from-left
+  +background-image(linear-gradient(left, #ddd 10px, #aaa 40px))
+
+.transparent-in-linear-gradient
+  +background-image(white linear-gradient(top left, transparent, #aaa))
+
+.currentColor-in-linear-gradient
+  +background-image(white linear-gradient(top left, transparent, currentColor))
+
+.rgba-in-linear-gradient
+  +background-image(white linear-gradient(top left, rgba(255,255,255,0.8), rgba(0,0,0,0.1)))
+
+.bg-radial-gradient
+  +background-image(radial-gradient(center center, #ddd, transparent 100px))
+
+.currentColor-in-radial-gradient
+  +background-image(radial-gradient(center center, currentColor, transparent 100px))
+
+.bg-linear-gradient-with-angle
+  +background-image(linear-gradient(-45deg, #ddd, #aaa))
+
+.bg-radial-gradient-with-angle-and-shape
+  +background-image(radial-gradient(ellipse cover, #ddd, #aaa 100px))
+
+.bg-all-gradient-types
+  +background-image(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px))
+
+.border-image-gradient
+  +border-image(radial-gradient(#0f0,#f00 100px) 100 stretch)
+
+.direct-list-image-plain
+  +list-style-image(image-url("4x6.png"))
+
+.shorthand-list-image-plain
+  +list-style(outside image-url("4x6.png"))
+
+.direct-list-image-with-gradient
+  +list-style-image(radial-gradient(lime, red 10px))
+
+.shorthand-list-image-with-gradient
+  // Note: I haven't seen a browser render this correctly, but they should eventually.
+  +list-style(outside radial-gradient(lime, red 10px))
+
+.content-plain
+  +content("asdf")
+
+.content-with-gradient
+  +content(radial-gradient(lime, red 10px))
+
+$svg-gradient-shim-threshold: 10
+
+.bg-linear-gradient-no-position
+  +background-image(linear-gradient(#ddd, #aaa))
+
+.bg-radial-gradient-no-position
+  +background-image(radial-gradient(#ddd, #aaa 100px))
+
+.image-fallback
+  +background-image(image(radial-gradient(#ddd, #aaa 100px), image-url("4x6.png"), #cc0000))
+
+.cross-fade
+  +background-image(cross-fade(radial-gradient(#ddd, #aaa 100px), image-url("4x6.png")))
+
+.unknown-function-wrapper
+  +background(foo(radial-gradient(#ddd, #aaa 100px)))
+
+.ie-horizontal-filter
+  +filter-gradient(white, black, horizontal)
+
+.ie-vertical-filter
+  +filter-gradient(white, black, vertical)
+
+.ie-alpha-filter
+  +filter-gradient(rgba(white, 1), rgba(white, 0))
+
+.linear-gradient-new
+  +background(linear-gradient(to bottom, #ff0000 0%, #88aa44 100%))
+
+$use-legacy-gradient-syntax: true
+ 
+.linear-gradient-old
+  +background(linear-gradient(top, #ff0000 0%, #88aa44 100%))
+ 
+// This setting is only important when we can't tell which syntax is being used.
+// * That is only ever true when the angle is specified in deg
+// * original webkit syntax does not support deg (see output)
+// * if $support-for-original-webkit-gradients and type-of($angle) == "number" : @WARN
+$use-legacy-gradient-syntax: false
+ 
+.linear-gradient-unknown-new
+  +background(linear-gradient(120deg, #ff0000 0%, #88aa44 100%))
+ 
+$use-legacy-gradient-syntax: true
+ 
+.linear-gradient-unknown-old
+  +background(linear-gradient(120deg, #ff0000 0%, #88aa44 100%))
+

data/test/fixtures/stylesheets/compass/sass/grid_background.scss

@@ -0,0 +1,34 @@
+@import "compass/layout/grid-background";
+
+.baseline {
+  @include baseline-grid-background;
+}
+
+.columns {
+  @include column-grid-background;
+}
+
+.combined {
+  @include grid-background;
+}
+
+$grid-background-total-columns: 15;
+$grid-background-offset: 11%;
+$grid-background-column-width: 5%;
+$grid-background-gutter-width: 1%;
+
+.percent-baseline {
+  @include baseline-grid-background;
+}
+
+.percent-columns {
+  @include column-grid-background;
+}
+
+.percent-combined {
+  @include grid-background;
+}
+
+.forced-fluid {
+  @include column-grid-background(12, 2em, 1em, 1em, $grid-background-column-color, $grid-background-gutter-color, true);
+}

data/test/fixtures/stylesheets/compass/sass/hyphenation.scss

@@ -0,0 +1,11 @@
+@import "compass/css3/hyphenation";
+
+.word-break {
+	@include word-break(keep-all);
+}
+.hyphens {
+	@include hyphens(manual);
+}
+.hyphenate {
+	@include hyphenation;
+}

data/test/fixtures/stylesheets/compass/sass/image_size.sass

@@ -0,0 +1,15 @@
+.png
+  width: image_width(unquote("100x150.png"))
+  height: image_height(unquote("100x150.png"))
+
+.jpg
+  width: image_width(unquote("100x150.jpg"))
+  height: image_height(unquote("100x150.jpg"))
+
+.jpeg
+  width: image_width(unquote("100x150.jpeg"))
+  height: image_height(unquote("100x150.jpeg"))
+
+.gif
+  width: image_width(unquote("100x150.gif"))
+  height: image_height(unquote("100x150.gif"))

data/test/fixtures/stylesheets/compass/sass/images.scss

@@ -0,0 +1,9 @@
+.relative {
+  background-image: image-url("4x6.png");
+}
+.root-relative {
+  background-image: image-url("/images/4x6.png");
+}
+.absolute {
+  background-image: image-url("http://example.com/images/4x6.png");
+}

data/test/fixtures/stylesheets/compass/sass/layout.sass

@@ -0,0 +1,3 @@
+@import compass/layout
+
++sticky-footer(72px, unquote("#layout"), unquote("#layout_footer"), unquote("#footer"))

data/test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss

@@ -0,0 +1,14 @@
+$default-has-layout-approach: block;
+
+@import "compass/utilities";
+
+.clearfix {
+    @include clearfix;
+}
+
+.pie-clearfix {
+    @include legacy-pie-clearfix;
+}
+.simplified-pie-clearfix {
+    @include pie-clearfix;
+}

data/test/fixtures/stylesheets/compass/sass/lists.scss

@@ -0,0 +1,12 @@
+@import "compass/typography/lists";
+
+ul.horizontal        { @include horizontal-list;             }
+ul.wide-horizontal   { @include horizontal-list(10px);       }
+ul.right-horizontal  { @include horizontal-list(4px, right); }
+ul.no-padding        { @include horizontal-list(false);      }
+ul.inline-block      { @include inline-block-list;           }
+ul.wide-inline-block { @include inline-block-list(10px);     }
+ul.inline            { @include inline-list;                 }
+ul.comma             { @include delimited-list;              }
+ul.no-bullets        { @include no-bullets;                  }
+ul.pretty            { @include pretty-bullets("4x6.png");   }

data/test/fixtures/stylesheets/compass/sass/opacity.scss

@@ -0,0 +1,9 @@
+@import "compass/css3/opacity";
+
+div {
+  @include opacity(1);
+}
+
+div {
+  @include opacity(.2);
+}

data/test/fixtures/stylesheets/compass/sass/print.sass

@@ -0,0 +1,5 @@
+@import compass/utilities/print
+
++print-utilities
+
++print-utilities(screen)

data/test/fixtures/stylesheets/compass/sass/regions.scss

@@ -0,0 +1,4 @@
+@import "compass/css3/regions";
+
+.source   { @include flow-into(target); }
+.new-container { @include flow-from(target); }

data/test/fixtures/stylesheets/compass/sass/replacement.scss

@@ -0,0 +1,22 @@
+@import "compass/typography/text/replacement";
+.basic {
+  @include replace-text("4x6.png");
+}
+.with-dimensions {
+  @include replace-text-with-dimensions("4x6.png");
+}
+.with-dimensions-inline {
+  @include replace-text-with-dimensions("4x6.png", $inline: true);
+}
+.with-position {
+  @include replace-text("4x6.png", 10px, top);
+}
+.with-arbitrary-url {
+  @include replace-text(url(http://google.com/logo.gif), 10px, top);
+}
+.with-inline-url {
+  @include replace-text(inline-image("4x6.png"), 10px, top);
+}
+.with-image-url {
+  @include replace-text(image-url("4x6.png"), 10px, top);
+}

data/test/fixtures/stylesheets/compass/sass/reset.sass

@@ -0,0 +1,12 @@
+@import compass/reset
+
+// Turn off the display for both of these classes
+.unregistered-only, .registered-only
+  display: none
+
+// Now turn only one of them back on depending on some other context.
+body.registered
+  +reset-display(unquote(".registered-only"))
+
+body.unregistered
+  +reset-display(unquote(".unregistered-only"))

data/test/fixtures/stylesheets/compass/sass/selection.scss

@@ -0,0 +1,41 @@
+$contrasted-dark-default: black;
+$contrasted-light-default: white;
+
+@import "compass/css3/selection";
+
+* {
+  @include selection {
+    background-color: #fe57a1;
+    color: #fff;
+  }
+}
+
+.hot-pink {
+  @include selection {
+    background-color: #fe57a1;
+    color: #fff;
+  }
+}
+
+.hot-pink-with-arguments {
+  @include selection(#fe57a1, white);
+}
+
+.hot-pink-with-arguments-and-extra-stuff {
+  @include selection(#fe57a1, white) {
+    text-decoration: line-through;
+  }
+}
+
+.hot-pink-with-default-foreground {
+  @include selection(#fe57a1);
+}
+
+.browser-support-is-considered {
+  @include selection(#fe57a1) {
+    prefix: $current-prefix;
+    -moz-prefix: $current-prefix == -moz;
+    -ms-prefix: $current-prefix == -ms;
+    -webkit-prefix: $current-prefix == -webkit;
+  }
+}

data/test/fixtures/stylesheets/compass/sass/sprites_with_explicit_separator.scss

@@ -0,0 +1,11 @@
+$flag_states-sprite-dimensions: true;
+$flag_states-class-separator: "_";
+
+@import "flag_states/*.png";
+
+@include all-flag_states-sprites;
+
+.sprite-file {
+  location: image-url(sprite_file($flag-states-sprites, foo));
+}
+

data/test/fixtures/stylesheets/compass/sass/stretching.sass

@@ -0,0 +1,34 @@
+@import "compass/layout/stretching"
+
+.stretched-completely
+  +stretch
+
+.stretched-horizontally
+  +stretch-x
+
+.stretched-right
+  +stretch-x(0, 50%)
+
+.left-pane
+  +stretch(0, 50%, 0, 0)
+
+.stretched-left
+  +stretch-x(50%, 0)
+
+.right-pane
+  +stretch(0, 0, 0, 50%)
+
+.stretched-down
+  +stretch-y(0, 50%)
+
+.top-pane
+  +stretch(0, 0, 50%, 0)
+
+.stretched-up
+  +stretch-y(50%, 0)
+
+.bottom-pane
+  +stretch(50%, 0, 0, 0)
+
+.viewport
+  +stretch(10px, 20px, 30px, 40px)

data/test/fixtures/stylesheets/compass/sass/support.scss

@@ -0,0 +1,174 @@
+@import "compass/css3/animation";
+@import "compass/css3/opacity";
+@import "true";
+
+$some-default-value: some default value;
+@function has-default-arglist($arglist...) {
+  @return set-arglist-default($arglist, $some-default-value);
+}
+
+@mixin with-declared-support($browsers) {
+  $old-browsers: $supported-browsers;
+  $supported-browsers: $browsers !global;
+  @content;
+  $supported-browsers: $old-browsers !global;
+}
+
+@mixin with-declared-minimums($supported-browsers) {
+    $old-mins: $browser-minimum-versions;
+    $browser-minimum-versions: $supported-browsers !global;
+    @content;
+    $browser-minimum-versions: $old-mins !global;
+}
+
+@include test-module('Compass Support') {
+  @include test('[function] set-arglist-default() with no arguments') {
+    @include assert-true(
+               has-default-arglist() == $some-default-value,
+               'No arguments should get a default value.');
+  }
+  @include test('[function] set-arglist-default() with a "default" argument') {
+    @include assert-true(
+               nth(has-default-arglist(default), 1) == $some-default-value,
+               'an argument of "default" should get a default value.');
+  }
+  @include test('[function] set-arglist-default() with a "default" argument and another argument') {
+    @include assert-true(
+               has-default-arglist(default, some other value) == ($some-default-value, some other value),
+               'an argument of "default" should get a default value.');
+  }
+  @include test('[function] set-arglist-default() with a "default" argument not first and another argument') {
+    @include assert-true(
+               has-default-arglist(some other value, default) == (some other value, $some-default-value),
+               'an argument of "default" should get a default value.');
+  }
+
+  @include test('[function] support-legacy-browser() from threshold') {
+    @include assert-true(support-legacy-browser('ie', '6', $threshold: 0.00000001),
+                         "should be supported because of user support threshold.");
+    @include assert-false(support-legacy-browser('ie', '6', $threshold: 10.000),
+                          "should not be supported because of support threshold.");
+  }
+
+  @include test('[function] support-legacy-browser() from minimums') {
+    @include with-declared-minimums(('ie': '7')) {
+      @include assert-true(support-legacy-browser('ie', '7', $threshold: 10.00),
+      "should be supported because of minimum version.");
+      @include assert-false(support-legacy-browser('ie', '6', $threshold: 10.000),
+      "should not be supported because of minimum version.");
+    }
+  }
+
+  @include test('[function] browser-out-of-scope() with no scope') {
+    @include assert-true(not browser-out-of-scope('ie'), "should be in scope.");
+    @include assert-true(not browser-out-of-scope('chrome'), "should be in scope.");
+  }
+
+  @include test('prefix context tracking') {
+    $outer-prefix-invoked: false;
+    $inner-prefix-invoked: false;
+    $mismatched-prefix-invoked: false;
+    @include with-prefix(-webkit) {
+      $outer-prefix-invoked: true;
+      @include assert-equal(-webkit, $current-prefix, "should be equal.");
+      @include assert-equal(-webkit, $prefix-context, "should be equal.");
+      @include with-prefix(null) {
+        $inner-prefix-invoked: true;
+        @include assert-equal(null, $current-prefix, "should be equal.");
+        @include assert-equal(-webkit, $prefix-context, "should be equal.");
+      }
+      @include with-prefix(-ms) {
+        $mismatched-prefix-invoked: true;
+      }
+    }
+    @include assert-true($inner-prefix-invoked, "should have been invoked");
+    @include assert-true($outer-prefix-invoked, "should have been invoked");
+    @include assert-false($mismatched-prefix-invoked, "should not have been invoked");
+    @include assert-equal(null, $prefix-context, "should be null");
+    @include assert-equal(null, $current-prefix, "should be null");
+  }
+
+  @include test('[function] browser-out-of-scope() with a scope') {
+    @include with-prefix(browser-prefix('chrome')) {
+      @include assert-true(not browser-out-of-scope('chrome'), "should be in scope.");
+      @include assert-false(not browser-out-of-scope('ie'), "should not be in scope.");
+    }
+  }
+
+  @include test('[function] browser-out-of-scope() with version') {
+    @include with-browser-ranges((ie: '8' '8')) {
+      @include assert-false(not browser-out-of-scope('ie', '10'), "should not be in scope.");
+      @include assert-true(not browser-out-of-scope('ie', '8'), "should be in scope.");
+      @include assert-false(not browser-out-of-scope('ie', '7'), "should not be in scope.");
+    }
+  }
+
+  @include test('[mixin] with-prefix()') {
+    @include assert-true($current-prefix == null, "should be null.");
+    @include with-prefix(-webkit) {
+      @include assert-true($current-prefix == -webkit, "should be set.");
+      $called: false;
+      @include with-prefix(-webkit) {
+        $called: true;
+      }
+      @include assert-true($called, "should be called.");
+      $called: false;
+      @include with-prefix(-ms) {
+        $called: true;
+      }
+      @include assert-false($called, "should not be called.");
+    }
+  }
+
+  @include test('[mixin] with-each-prefix()') {
+    $prefixes: ();
+    @include with-each-prefix(css-regions, 0.0001) {
+      $prefixes: append($prefixes, $current-prefix);
+    }
+    @include assert-equal((-ms -webkit null), $prefixes, "Not equal");
+  }
+
+  @include test('[mixin] with-each-prefix() respects $supported-browsers') {
+    @include with-declared-support("ie") {
+      $prefixes: ();
+      @include with-each-prefix(css-regions, 0.0001) {
+        $prefixes: append($prefixes, $current-prefix);
+      }
+      @include assert-equal((-ms null), $prefixes, "Not equal");
+    }
+  }
+
+  @include test('[mixin] with-each-prefix() respects $current-prefix') {
+    $contexts: ();
+    $prefixes: ();
+    @include with-prefix(-webkit) {
+      $prefixes: append($prefixes, $current-prefix);
+      $contexts: append($contexts, $prefix-context);
+      @include with-each-prefix(css-regions, 0.0001) {
+        $prefixes: append($prefixes, $current-prefix);
+        $contexts: append($contexts, $prefix-context);
+      }
+    }
+    @include assert-true(index($prefixes, null), "Must have a null");
+    @include assert-equal((-webkit -webkit null), $prefixes, "Not equal");
+    @include assert-equal((-webkit -webkit -webkit), $contexts, "Not equal");
+  }
+
+  @include test('[fuction] has-browser-subset()') {
+    @include assert-true(has-browser-subset((firefox: "16" "25"), (firefox: "2" "25")), "Should detect version overlap");
+    @include assert-true(not has-browser-subset((firefox: "16" "25"), (firefox: "2" "15")), "Should not detect version overlap");
+    @include assert-true(not has-browser-subset((firefox: "2" "15"), (firefox: "16" "25")), "Should not detect version overlap");
+    @include assert-true(has-browser-subset((firefox: "16" "24"), (firefox: "2" "25")), "Should detect version overlap");
+    @include assert-true(has-browser-subset((firefox: "2" "25"), (firefox: "16" "24")), "Should detect version overlap");
+  }
+}
+
+@include with-browser-support-debugging {
+  @include keyframes(foo) {
+    0% { @include opacity(0); }
+    100% { @include opacity(1); }
+  }
+  .foo {
+    @include animation(foo 1s);
+  }
+}

data/test/fixtures/stylesheets/compass/sass/text_shadow.scss

@@ -0,0 +1,12 @@
+$default-text-shadow-color: #aaaaaa;
+@import "compass/css3/text-shadow";
+
+.default-single-text-shadow { @include single-text-shadow;}
+.none { @include single-text-shadow(none);}
+.color-only { @include single-text-shadow(#cccccc);}
+.color-first-with-params { @include single-text-shadow(#cccccc, 2px, 2px, 5px, 2px);}
+.color-last-with-params { @include single-text-shadow(2px, 2px, 5px, 2px, #cccccc);}
+.default-text-shadow { @include text-shadow;}
+.multiple-text-shadows-with-default { @include text-shadow(default, 2px 2px 5px #222222);}
+.multiple-text-shadows { @include text-shadow(4px 4px 10px #444444, 2px 2px 5px #222222);}
+.multiple-text-shadows-with-spread { @include text-shadow(4px 4px 10px 1px #444444, 2px 2px 5px 3px #222222);}

data/test/fixtures/stylesheets/compass/sass/transform.scss

@@ -0,0 +1,87 @@
+@import "compass/css3/transform";
+
+.apply-origin-2d                  { @include apply-origin(2px 5%, false); }
+.apply-origin-3d                  { @include apply-origin(2px 5% 2in, true); }
+.transform-origin-2d              { @include transform-origin(100px, 100px); }
+.transform-origin-3d              { @include transform-origin(100px, 100px, 100px); }
+.transform-2d                     { @include transform2d(rotateY(20deg)); }
+.transform-3d                     { @include transform3d(rotateZ(20deg)); }
+.perspective                      { @include perspective(500); }
+.perspective-origin               { @include perspective-origin(25% 25%)}
+.transform-style                  { @include transform-style; }
+.backface-visibility              { @include backface-visibility;}
+.scale                            { @include scale(30px, 50px);}
+.scale-3d                         { @include scale(30px, 50px, false, true);}
+.scale-with-perspective           { @include scale(30px, 50px, 500);}
+.scale-3d-with-perspective        { @include scale(30px, 50px, 500, true);}
+.scale-x                          { @include scaleX(30px);}
+.scale-x-3d                       { @include scaleX(30px, false, true);}
+.scale-x-with-perspective         { @include scaleX(30px, 500);}
+.scale-x-3d-with-perspective      { @include scaleX(30px, 500, true);}
+.scale-y                          { @include scaleY(50px);}
+.scale-y-3d                       { @include scaleY(50px, false, true);}
+.scale-y-with-perspective         { @include scaleY(50px, 500);}
+.scale-y-3d-with-perspective      { @include scaleY(50px, 500, true);}
+.scale-z                          { @include scaleZ(50px);}
+.scale-z-with-perspective         { @include scaleZ(50px, 500);}
+.scale3d                          { @include scale3d(30px, 50px, 100px);}
+.scaled3-with-perspective         { @include scale3d(30px, 50px, 100px, 500);}
+.rotate                           { @include rotate(25deg, 500);}
+.rotate-with-perspective          { @include rotate(25deg, 500);}
+.rotate-z                         { @include rotateZ(25deg);}
+.rotate-z-with-perspective        { @include rotateZ(25deg, 500);}
+.rotate-x                         { @include rotateX(25deg);}
+.rotate-x-with-perspective        { @include rotateX(25deg, 500);}
+.rotate-y                         { @include rotateY(25deg);}
+.rotate-y-with-perspective        { @include rotateY(25deg, 500);}
+.rotate-3d                        { @include rotate3d(5, 2, 1, 75deg);}
+.rotate-3d-with-perspective       { @include rotate3d(5, 2, 1, 75deg, 500);}
+.translate                        { @include translate(20px, 30%);}
+.translate-with-perspective       { @include translate(20px, 30%, 500);}
+.translate-3d                     { @include translate(20px, 30%, false, true);}
+.translate-3d-with-perspective    { @include translate(20px, 30%, 500, true);}
+.translate-x                      { @include translateX(30px);}
+.translate-x-3d                   { @include translateX(30px, false, true);}
+.translate-x-with-perspective     { @include translateX(30px, 500);}
+.translate-x-3d-with-perspective  { @include translateX(30px, 500, true);}
+.translate-y                      { @include translateY(30px);}
+.translate-y-3d                   { @include translateY(30px, false, true);}
+.translate-y-with-perspective     { @include translateY(30px, 500);}
+.translate-y-3d-with-perspective  { @include translateY(30px, 500, true);}
+.translate-z                      { @include translateZ(30px);}
+.translate-z-with-perspective     { @include translateZ(30px, 500);}
+.translate-3d                     { @include translate3d(30px, 50px, 75px);}
+.translate-3d-with-perspective    { @include translate3d(30px, 50px, 75px, 500);}
+.skew                             { @include skew(20deg, 50deg);}
+.skew-3d                          { @include skew(20deg, 50deg, true);}
+.skew-x                           { @include skewX(20deg);}
+.skew-x-3d                        { @include skewX(20deg, true);}
+.skew-y                           { @include skewY(20deg);}
+.skew-y-3d                        { @include skewY(20deg, true);}
+.create-transform-2d              { @include create-transform(
+                                               500,
+                                               20px, 20px, false,
+                                               25deg, 25deg, false, false
+                                               50px, 50px, false,
+                                               50deg, 50deg,
+                                               50%, 50%, false
+                                              );
+                                  }
+.create-transform-3d              { @include create-transform(
+                                               500,
+                                               20px, 20px, 20px,
+                                               25deg, 25deg, 25deg, false
+                                               50px, 50px, 50px,
+                                               50deg, 50deg,
+                                               50%, 50%, 50%
+                                              );
+                                  }
+
+.simple-transform                 { @include simple-transform(
+                                               25px,
+                                               25deg,
+                                               10px, 10px,
+                                               30deg, 30deg,
+                                               10%, 10%
+                                             );
+                                  }