diff --git a/examples/blueprint_plugins/src/link_icons.scss b/examples/blueprint_plugins/src/link_icons.scss index 53274cf3..c4e28a75 100644 --- a/examples/blueprint_plugins/src/link_icons.scss +++ b/examples/blueprint_plugins/src/link_icons.scss @@ -10,4 +10,4 @@ body { // Not all links have a url structure that can be detected, // So you can set them explicitly yourself like so: a#this-is-a-pdf-link { - @include link-icon(unquote("pdf.png")); } } + @include link-icon("pdf.png"); } } diff --git a/examples/blueprint_semantic/src/screen.scss b/examples/blueprint_semantic/src/screen.scss index b600ab27..bc2a1c5d 100644 --- a/examples/blueprint_semantic/src/screen.scss +++ b/examples/blueprint_semantic/src/screen.scss @@ -9,7 +9,7 @@ body.blueprint { .container { @include container; } .showgrid { - background: inline_image(unquote("grid.png")); } + background: inline_image("grid.png"); } hr { @include colruler; } hr.space { diff --git a/examples/compass/src/sticky_footer.scss b/examples/compass/src/sticky_footer.scss index 4f3f807f..3c5bd4e0 100644 --- a/examples/compass/src/sticky_footer.scss +++ b/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; diff --git a/examples/compass/src/utilities.scss b/examples/compass/src/utilities.scss index b15702f8..069c067b 100644 --- a/examples/compass/src/utilities.scss +++ b/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); diff --git a/examples/css3/src/gradients.scss b/examples/css3/src/gradients.scss index 6b39b710..ca55c6c7 100644 --- a/examples/css3/src/gradients.scss +++ b/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\"))"; } } \ No newline at end of file + content: "+background-image(image-url(\"button_bg.png\"), radial-gradient(center center, #c00 25px, #00c 75px))"; } } \ No newline at end of file diff --git a/examples/css3/src/main.scss b/examples/css3/src/main.scss index 5396a0c1..57d0d2f3 100644 --- a/examples/css3/src/main.scss +++ b/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)); } }