compass 0.11.alpha.4 → 0.11.beta.0

data/examples/compass/sprites.html.haml

@@ -0,0 +1,37 @@
+!!!
+%html
+  %head
+    %link{:href => "stylesheets/sprites.css", :rel => "stylesheet", :type => "text/css"}
+  %body
+    %h1 Flags
+    %table#flags
+      %tr
+        %td.us
+        %td.de
+        %td.ca
+      %tr
+        %td.au
+        %td.cn
+        %td.cz
+      %tr
+        %td.nz
+        %td.jp
+        %td.scotland
+      %tr
+        %td.tw
+        %td.rs
+        %td.gb
+    %h1 Emblems
+    %table#emblems
+      %tr
+        %td.favorite
+        %td.important
+        %td.photos
+      %tr
+        %td.readonly
+        %td.symbolic-link
+        %td.system
+      %tr
+        %td.unreadable
+        %td
+        %td

data/examples/compass/src/sprites.scss

@@ -0,0 +1,25 @@
+@import "flag/*.png";
+@import "emblem/*.png";
+
+.flag-sprite {
+  width: image-width("flag/us.png");
+  height: image-height("flag/us.png");
+  padding: 0;
+}
+
+.emblem-sprite {
+  width: image-width("emblem/favorite.png");
+  height: image-height("emblem/favorite.png");
+  padding: 0;
+}
+
+#flags {
+  @include sprites($flag-sprites,
+                   us de ca au cn cz nz jp scotland tw rs gb,
+                   $flag-sprite-base-class,
+                   $prefix: false);
+}
+
+#emblems {
+  @include all-emblem-sprites($prefix: false);
+}

data/examples/compass/src/sticky_footer.scss

@@ -1,7 +1,7 @@
 @import "compass/reset";
 @import "compass/layout";
 
-@include sticky-footer(72px, unquote("#layout"), unquote("#layout_footer"), unquote("#footer"));
+@include sticky-footer(72px, "#layout", "#layout_footer", "#footer");
 
 #header {
   background: #999999;

data/examples/compass/src/utilities.scss

@@ -57,7 +57,7 @@ h2 {
   ul.comma-delimited {
     @include comma-delimited-list; }
   ol.pretty {
-    @include pretty-bullets(unquote("blue_arrow.gif"), 5px, 7px, 18px); } }
+    @include pretty-bullets("blue_arrow.gif", 5px, 7px, 18px); } }
 
 #tables {
   @include column(16);

data/examples/css3/src/gradients.scss

@@ -11,76 +11,76 @@ thead th {
   @include text-shadow(white); }
 
 th.linear {
-  @include linear-gradient(color-stops(white, red 50%, yellow 75%, lime)); }
+  @include background-image(linear-gradient(white, red 50%, yellow 75%, lime)); }
 
 th.radial {
-  @include radial-gradient(color-stops(white, red 20px, yellow 30px, lime 40px)); }
+  @include background-image(radial-gradient(white, red 20px, yellow 30px, lime 40px)); }
 
 tr.default {
   td.linear {
-    @include linear-gradient(color-stops(#cc0000, #0000cc)); }
+    @include background-image(linear-gradient(#cc0000, #0000cc)); }
   td.radial {
-    @include radial-gradient(color-stops(#cc0000, #0000cc)); }
+    @include background-image(radial-gradient(#cc0000, #0000cc)); }
   td.linear-code:before {
-    content: "+linear-gradient(color-stops(#c00, #00c))"; }
+    content: "+background-image(linear-gradient(#c00, #00c))"; }
   td.radial-code:before {
-    content: "+radial-gradient(color-stops(#c00, #00c))"; } }
+    content: "+background-image(radial-gradient(#c00, #00c))"; } }
 
 tr.top-left {
   td.linear {
-    @include linear-gradient(color-stops(#cc0000, #0000cc), unquote("top left")); }
+    @include background-image(linear-gradient(top left, #cc0000, #0000cc)); }
   td.radial {
-    @include radial-gradient(color-stops(#cc0000, #0000cc), unquote("top left")); }
+    @include background-image(radial-gradient(top left, #cc0000, #0000cc)); }
   td.linear-code:before {
-    content: '+linear-gradient(color-stops(#c00, #00c), "top left")'; }
+    content: '+background-image(linear-gradient(top left, #c00, #00c))'; }
   td.radial-code:before {
-    content: '+radial-gradient(color-stops(#c00, #00c), "top left")'; } }
+    content: '+background-image(radial-gradient(top left, #c00, #00c))'; } }
 
 tr.bottom-right {
   td.linear {
-    @include linear-gradient(color-stops(#cc0000, #0000cc), unquote("bottom right")); }
+    @include background-image(linear-gradient(bottom right, #cc0000, #0000cc)); }
   td.radial {
-    @include radial-gradient(color-stops(#cc0000, #0000cc), unquote("bottom right")); }
+    @include background-image(radial-gradient(bottom right, #cc0000, #0000cc)); }
   td.linear-code:before {
-    content: '+linear-gradient(color-stops(#c00, #00c), "bottom right")'; }
+    content: '+background-image(linear-gradient(bottom right, #c00, #00c))'; }
   td.radial-code:before {
-    content: '+radial-gradient(color-stops(#c00, #00c), "bottom right")'; } }
+    content: '+background-image(radial-gradient(bottom right, #c00, #00c))'; } }
 
 tr.three-color {
   td.linear {
-    @include linear-gradient(color-stops(#cc0000, white, #0000cc)); }
+    @include background-image(linear-gradient(#cc0000, white, #0000cc)); }
   td.radial {
-    @include radial-gradient(color-stops(#cc0000, white, #0000cc 50px)); }
+    @include background-image(radial-gradient(#cc0000, white, #0000cc 50px)); }
   td.linear-code:before {
-    content: "+linear-gradient(color-stops(#c00, #fff, #00c))"; }
+    content: "+background-image(linear-gradient(#c00, #fff, #00c))"; }
   td.radial-code:before {
-    content: "+radial-gradient(color-stops(#c00, #fff, #00c 50px))"; } }
+    content: "+background-image(radial-gradient(#c00, #fff, #00c 50px))"; } }
 
 tr.four-color {
   td.linear {
-    @include linear-gradient(color-stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc)); }
+    @include background-image(linear-gradient(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc)); }
   td.radial {
-    @include radial-gradient(color-stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc 50px)); }
+    @include background-image(radial-gradient(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc 50px)); }
   td.linear-code:before {
-    content: "+linear-gradient(color-stops(#c00, #0c0 25%, #0cc 75%, #00c))"; }
+    content: "+background-image(linear-gradient(#c00, #0c0 25%, #0cc 75%, #00c))"; }
   td.radial-code:before {
-    content: "+radial-gradient(color-stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"; } }
+    content: "+background-image(radial-gradient(#c00, #0c0 25%, #0cc 75%, #00c 50px))"; } }
 
 tr.filled-in {
   td.linear {
-    @include linear-gradient(color-stops(#cc0000 33%, #0000cc 66%)); }
+    @include background-image(linear-gradient(#cc0000 33%, #0000cc 66%)); }
   td.radial {
-    @include radial-gradient(color-stops(#cc0000 25px, #0000cc 75px)); }
+    @include background-image(radial-gradient(#cc0000 25px, #0000cc 75px)); }
   td.linear-code:before {
-    content: "+linear-gradient(color-stops(#c00 33%, #00c 66%))"; }
+    content: "+background-image(linear-gradient(#c00 33%, #00c 66%))"; }
   td.radial-code:before {
-    content: "+radial-gradient(color-stops(#c00 25px, #00c 75px))"; } }
+    content: "+background-image(radial-gradient(#c00 25px, #00c 75px))"; } }
 tr.with-bg {
   td.linear {
-    @include linear-gradient(color-stops(#cc0000 33%, #0000cc 66%), top, image-url("button_bg.png")); }
+    @include background-image(image-url("button_bg.png"), linear-gradient(top, #c00 33%, #00c 66%)); }
   td.radial {
-    @include radial-gradient(color-stops(#cc0000 25px, #0000cc 75px), center center, image-url("button_bg.png")); }
+    @include background-image(image-url("button_bg.png"), radial-gradient(center center, #c00 25px, #00c 75px)); }
   td.linear-code:before {
-    content: "+linear-gradient(color-stops(#cc0000 33%, #0000cc 66%), top, image-url(\"button_bg.png\"))"; }
+    content: "+background-image(image-url(\"button_bg.png\"), linear-gradient(top, #c00 33%, #00c 66%))"; }
   td.radial-code:before {
-    content: "+radial-gradient(color-stops(#cc0000 25px, #0000cc 75px), center center, image-url(\"button_bg.png\"))"; } }
+    content: "+background-image(image-url(\"button_bg.png\"), radial-gradient(center center, #c00 25px, #00c 75px))"; } }

data/examples/css3/src/main.scss

@@ -26,14 +26,14 @@ h1 {
   min-width: $min_width;
   border: 4px solid #{$border_color};
   @include border-radius(0.667em);
-  @include box-shadow(darken($border_color, 40), 5px, 5px, 2px);
+  @include single-box-shadow(darken($border_color, 40), 5px, 5px, 2px);
   margin-bottom: 1em;
   h2 {
     margin: 0.5em 0 1em;
     text-align: center; } }
 
 .inset {
-  @include box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset);
+  @include single-box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset);
 }
 
 .gutter {
@@ -44,7 +44,7 @@ h1 {
   content: " "; }
 
 .example {
-  @include linear-gradient(color_stops(white, #cccccc));
+  @include background-image(linear-gradient(white, #cccccc));
   pre {
     padding: 1em;
     margin: 1em;
@@ -76,39 +76,33 @@ h1 {
 
 #gradients {
   .horizontal {
-    @include linear-gradient(color_stops(#d92626, #2626d9), left); }
+    @include background-image(left, linear-gradient(#d92626, #2626d9)); }
   .vertical {
-    @include linear-gradient(color_stops(#d92626, #2626d9)); }
+    @include background-image(linear-gradient(#d92626, #2626d9)); }
   .diagonal {
-    @include linear-gradient(color_stops(#d92626, #2626d9), unquote("right top")); }
+    @include background-image(linear-gradient(right top, #d92626, #2626d9)); }
   .radial {
     /* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */
-    @include radial-gradient(color_stops(#d92626 10px, #2626d9 150px));
+    @include background-image(radial-gradient(#d92626 10px, #2626d9 150px));
     // +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
     // background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
     // background-color: #2626d9
   }
   .radial-1 {
     // A default radial gradient:
-    /* +radial-gradient(color_stops(#ddd, #aaa)) */
-    @include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
+    @include background-image(radial-gradient(#dddddd, #aaaaaa)); }
   .radial-2 {
     // A centered gradient
-    /* +radial-gradient(color_stops(#ddd, #aaa)) */
-    @include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
+    @include background-image(radial-gradient(#dddddd, #aaaaaa)); }
   .radial-3 {
     // A centered radial gradient at the top
-    /* +radial-gradient(color_stops(#ddd, #aaa), "top center") */
-    @include radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center")); }
+    @include background-image(radial-gradient(top center, #dddddd, #aaaaaa)); }
   .radial-4 {
     // A centered radial gradient with fixed color stops
-    /* +radial-gradient(color_stops(#ddd 20px, #aaa 50px)) */
-    @include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px)); }
+    @include background-image(radial-gradient(#dddddd 20px, #aaaaaa 50px)); }
   .radial-5 {
     // A centered gradient with several color stops
-    /* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00)) */
-    @include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
+    @include background-image(radial-gradient(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
   .radial-6 {
     // A centered gradient with color stops
-    /* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c)) */
-    @include radial-gradient(color_stops(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }
+    @include background-image(radial-gradient(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }

data/features/rails_integration.feature

@@ -0,0 +1,32 @@
+Feature: Rails Integration
+  In order to provide an integrated experience
+  As a Ruby on Rails user
+  I want to easily access the Compass functionality
+
+  Scenario: Configure Compass from my Application
+    Given I'm in a rails3.1 application named 'exemplar'
+     When I edit 'config/application.rb' and save it with the following value:
+          """
+          require File.expand_path('../boot', __FILE__)
+          require 'rails/all'
+          Bundler.require(:default, Rails.env) if defined?(Bundler)
+          module Exemplar
+            class Application < Rails::Application
+              config.encoding = "utf-8"
+              config.filter_parameters += [:password]
+          
+              config.compass.fonts_dir = "app/assets/fonts"
+            end
+          end
+          """
+      And I run: compass config -p fonts_dir
+     Then the command should print out "app/assets/fonts"
+  Scenario: Rails gets access to the compass config file
+    Given I'm in a rails3.1 application named 'exemplar'
+     When I edit 'config/compass.rb' and save it with the following value:
+          """
+          fonts_dir = "app/assets/fonts"
+          """
+      And I run: ruby -I. -rconfig/environment -e 'puts Compass.configuration.fonts_dir'
+     Then the command should print out "app/assets/fonts"
+