diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index b82f7a31..d6cbf02f 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -7,33 +7,81 @@ layout: article COMPASS CHANGELOG ================= -0.11.alpha.1 (UNRELEASED) -------------------------- +Upgrading compass is really easy. +Don't let all these details [scare you...](/docs/tutorials/upgrading/im-scared/) + +The Documentation for the [latest stable release](http://compass-style.org/docs/): + +The Documentation for the [latest preview release](http://beta.compass-style.org/docs/) + +0.11.alpha.1 (11/16/2010) +--------------------------- + +Note: Compass does not currently support Sass 3.1 alphas. + +### Deprecations * Deprecated imports and APIs from v0.10 have been removed. -* Changed defaults for the box-shadow and text-shadow mixin. Previously the horizontal and vertical offset were both 1, which expected a top left light source. They are now set to 0 which assumes a direct light source, a more generic default. +* Changed defaults for the box-shadow and text-shadow mixins. + Previously the horizontal and vertical offset were both 1, which + expected a top left light source. They are now set to 0 which assumes + a direct light source, a more generic default. +* The linear-gradient and radial-gradient mixins have been deprecated. + Instead use the background-image mixin and pass it a gradient function. + The deprecation warning will print out the correct call for you to use. +* The `css3` import is deprecated as well as the following css3 modules: + `box-shadow`, `text-shadow`, and `transform`. Instead import `css3/version-2`, + `box-shadow-v2`, `text-shadow-v2`, and `transform-v2` respectively. + However, you will only get deprecation warnings if you actually use + one of the deprecated mixins. The imports will be restored by 1.0 + with the new, betterer APIs. +* Passing an argument to the `blueprint-scaffolding` mixin is not necessary + and has been deprecated. +* Some blueprint color defaults now use color functions instead of color arithmetic. + This may result in different output for those who have color customizations. ### Blueprint -* Deprecations: - - Passing an argument to the blueprint-scaffolding mixin is not necessary - and has been deprecated. -* Some color defaults now use color functions instead of color arithmetic. - This may result in different output for those who have color customizations. * Updated from blueprint 0.9 to blueprint 1.0 - * Added detailed explanations to core uncompressed CSS files [CMM] * Added .info and .alert classes to forms.css [CMM] * Fixed numerous bugs in forms, including the fieldset padding bug in IE6-8 [CMM] * Fixed specificity problems in typography.css and grid.css [CMM] * See Lighthouse for more bug fixes - * Full [changelog][blueprint_10_change] + * Full [blueprint changelog][blueprint_10_change] * If for some reason you'd like to stay on the older version of blueprint you can run the following command in your project before you upgrade (or after temporarily downgrading): `compass unpack blueprint` +### CSS3 v2.0 + +Our CSS3 module makes writing CSS3 today almost as easy as it will be when all +the browsers officially support the new features. The second version of the +compass CSS module brings the API up to date with developments over the past +6 to 9 months of browser changes and more closely matching the most recent CSS +specifications. Summary of changes: + +* Support for multiple box shadows and text shadows +* Support for 2d and 3d transforms +* Opt-in SVG support for gradients in opera and IE9. + Set `$experimental-support-for-svg : true` in your + stylesheet to enable it. +* Fixed a radial gradient position bug. +* To generate a simple linear gradient in IE6 & 7, you can now use + the `filter-gradient` mixin. +* New `background-image` mixin with gradient support and allowing + up to 10 images. +* Gradient support for the border-image property. +* Gradient support for list-style-image property. +* Gradient support for the content property. ### Helpers +* `linear-gradient()` & `radial-gradient()` helpers now intercept standard css + functions and parse them into Sass Literals. These work with new vendor helpers + (`-moz()`, `-webkit`, `-o`, `-ie`, and `-svg` (yes I know svg is not a vendor)) + to return specific representations of the linear & radial gradients. The + `prefixed()` function will check a value to see if it has a certain + vendor-specific representation. * New color helpers: `adjust-lightness`, `adjust-saturation`, `scale-lightness`, and `scale-saturation` make it easier to construct apis that manipulate these color attributes. * The `elements-of-type()` helper now returns html5 elements when the display is `block` @@ -48,12 +96,34 @@ COMPASS CHANGELOG If you provide a number with units of `deg` then it will return a unitless number after converting to radians. Otherwise, it assumes the number is a radian length measure and passes the units along to the result. +* `ie-hex-str($color)` returns a #AARRGGBB formatted color suitable for + passing to IE filters. * A new function `if()` that allows you to switch on a value without using `@if`. Usage: `if($truth-value, $value-if-true, $value-if-false)`. +* Compass has added a number of new helper functions for lists that begin with + `-compass`, helpers that begin with `-compass` should be considered "private" and + are not to be used by compass users. Sass 3.1 will have proper list support, + these are a work around until that time. + +### Configuration + +* Added a new configuration property to disable sass warnings: `disable_warnings` + +### Core Framework + +* New layout mixins for absolute positioning: stretch, stretch-x, stretch-y ### Rails -* Better integration with rails 3 (XXX Details) +* In rails 3, there's no need for an initializer. Instead we use a + Railstie. +* We now default to app/stylesheets for sass files and public/stylesheets for + css files -- though they can still be changed after installation or on the + command line during project initialization. +* Compass is now a gem plugin in a rails environment. +* In a rails3 environment the compass configuration can now be + changed without restarting the rails server process. + 0.10.7 (UNRELEASED) ------------------- diff --git a/doc-src/content/reference/compass/css3/images.haml b/doc-src/content/reference/compass/css3/images.haml new file mode 100644 index 00000000..ddcb411f --- /dev/null +++ b/doc-src/content/reference/compass/css3/images.haml @@ -0,0 +1,16 @@ +--- +title: Compass Images +crumb: Images +framework: compass +stylesheet: compass/css3/_images.scss +meta_description: Specify linear gradients and radial gradients for many browsers. +layout: core +classnames: + - reference + - core + - css3 +--- +- render 'reference' do + %p + Provides mixins that work across many modern browsers with the latest + CSS3 image rendering primitives. diff --git a/doc-src/content/tutorials/configuration-reference.markdown b/doc-src/content/tutorials/configuration-reference.markdown index ff6807d2..4f32a4a1 100644 --- a/doc-src/content/tutorials/configuration-reference.markdown +++ b/doc-src/content/tutorials/configuration-reference.markdown @@ -202,6 +202,13 @@ command line will override the corresponding settings in your configuration file approach. + + disable_warnings + Boolean + + Set this to true to silence deprecation warnings. + + sass_options Hash diff --git a/doc-src/content/tutorials/upgrading/css3-v2.markdown b/doc-src/content/tutorials/upgrading/css3-v2.markdown new file mode 100644 index 00000000..d3cc756d --- /dev/null +++ b/doc-src/content/tutorials/upgrading/css3-v2.markdown @@ -0,0 +1,10 @@ +The `css3` import is deprecated as well as the following css3 modules: +`box-shadow`, `text-shadow`, and `transform`. Instead import `css3/version-2`, +`box-shadow-v2`, `text-shadow-v2`, and `transform-v2` respectively. +However, you will only get deprecation warnings if you actually use +one of the deprecated mixins. The imports will be restored by 1.0 +with the new, betterer APIs. + +You should read about what changed, update your stylesheets accordingly +and then update your imports to the new version. + diff --git a/doc-src/content/tutorials/upgrading/im-scared.markdown b/doc-src/content/tutorials/upgrading/im-scared.markdown new file mode 100644 index 00000000..0233b9aa --- /dev/null +++ b/doc-src/content/tutorials/upgrading/im-scared.markdown @@ -0,0 +1,58 @@ +--- +title: I'm Scared to Upgrade +layout: tutorial +crumb: Scared to Upgrade? +classnames: + - tutorial +--- +# I'm scared to upgrade. + +Why? Don't ya trust me? I won't break your stylesheets. Cross my heart. All those +200+ github issues were feature requests. Honest. But you know, they might change +a little. Probably not in any meaningful way. Like a default that used to be +specified in the output might be omitted because it's the browser default anyway. + +## Trust but verify. + +But you should probably keep me on my toes. Follow these simple steps to see +what changed to your stylesheets: + +*(Steps beginning with a $ are command line commands. Don't type the $.)* + +1. $ cd my_compass_project +2. $ compass compile --force +3. $ cp -r stylesheets stylesheets.backup +4. $ gem install compass --pre # you might need to type sudo first if you're on mac or linux. +5. $ compass compile --force +6. Take note of any deprecation warnings printed in red during the compile. +7. If you have textmate and installed the `mate` command line tool:
+ $ diff -r stylesheets.backup stylesheets | mate +8. If you have not installed the `mate` tool:
+ $ sudo ln -s /Applications/TextMate.app/Contents/Resources/mate /usr/local/bin/mate + Then perform step 7. +9. If you do not have Textmate, run the diff command like so: + $ diff -y -r stylesheets.backup stylesheets | less +10. Scroll or use your arrow keys to review the differences between the files. +11. If you're satisfied: $ git commit -a -m "Upgraded compass" +12. If you're scared again: + A. Don't panic. + B. Read the [CHANGELOG](http://compass-style.org/docs/CHANGELOG/) and + see if the changes are explained there. + B. Send an email to the [mailing list](http://groups.google.com/group/compass-users) + explaining the problem and providing enough context like snippets from your diff + and the relevant snippets of your sass/scss files. In rare cases we might request + that you construct a simple compass project that exhibits the issue and make an + archive of it and send us an email with it attached. + C. If it's pretty obviously a bug. Please file an issue + on [github](http://github.com/chriseppstein/compass/issues). If you're experiencing + a crash, please run the command with the --trace option and record the output for + diagnostic purposes. + D. $ sudo gem uninstall compass + Select the newest version of compass. You have now downgraded to the old + version of compass. + E. $ compass compile --force + F. Diff the folders as in steps 7 through 9. +13. Breathe a sigh of relief. + + + diff --git a/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss b/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss index 3086edcf..31a09fc3 100644 --- a/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss +++ b/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss @@ -69,23 +69,10 @@ $default-box-shadow-inset : false !default; } @if $shadow-1 == default { - $shadow-1 : $default-box-shadow-h-offset $default-box-shadow-v-offset; - @if $default-box-shadow-blur { $shadow-1: $shadow-1 $default-box-shadow-blur; } - @if $default-box-shadow-spread { $shadow-1: $shadow-1 $default-box-shadow-spread; } - @if $default-box-shadow-color { $shadow-1: $shadow-1 $default-box-shadow-color; } - @if $default-box-shadow-inset { $shadow-1: inset $shadow-1; } + $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color)); } - $shadow : $shadow-1; - @if $shadow-2 { $shadow: $shadow, $shadow-2; } - @if $shadow-3 { $shadow: $shadow, $shadow-3; } - @if $shadow-4 { $shadow: $shadow, $shadow-4; } - @if $shadow-5 { $shadow: $shadow, $shadow-5; } - @if $shadow-6 { $shadow: $shadow, $shadow-6; } - @if $shadow-7 { $shadow: $shadow, $shadow-7; } - @if $shadow-8 { $shadow: $shadow, $shadow-8; } - @if $shadow-9 { $shadow: $shadow, $shadow-9; } - @if $shadow-10 { $shadow: $shadow, $shadow-10; } + $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10); @include experimental(box-shadow, $shadow, -moz, -webkit, -o, not -ms, not -khtml, official ); 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/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss index 346410a3..7a33154f 100644 --- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss +++ b/frameworks/compass/stylesheets/compass/css3/_gradient.scss @@ -33,7 +33,21 @@ // - Firefox 3.6 // - Opera -@mixin linear-gradient($color-stops, $start: top, $image: false) { +@mixin linear-gradient($color-stops, $start: false, $image: false) { + @if $image { + @if $start { + @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))"; + } @else { + @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))"; + } + } @else { + @if $start { + @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$start}, #{$color-stops}))"; + } @else { + @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$color-stops}))"; + } + } + @if not $start { $start: top; } @include background-image($image, linear-gradient($start, $color-stops)); } @@ -73,6 +87,20 @@ // - Firefox 3.6 // - Opera -@mixin radial-gradient($color-stops, $center-position: center center, $image: false) { +@mixin radial-gradient($color-stops, $center-position: false, $image: false) { + @if $image { + @if $center-position { + @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))"; + } @else { + @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))"; + } + } @else { + @if $center-position { + @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$center-position}, #{$color-stops}))"; + } @else { + @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$color-stops}))"; + } + } + @if not $center-position { $center-position: center center; } @include background-image($image, radial-gradient($center-position, $color-stops)); } diff --git a/lib/compass/commands/update_project.rb b/lib/compass/commands/update_project.rb index 1d84185e..2e961c61 100644 --- a/lib/compass/commands/update_project.rb +++ b/lib/compass/commands/update_project.rb @@ -47,10 +47,10 @@ module Compass def new_compiler_instance(additional_options = {}) compiler_opts = Compass.sass_engine_options - compiler_opts.merge!(:quiet => options[:quiet], - :force => options[:force], + compiler_opts.merge!(:force => options[:force], :sass_files => explicit_sass_files, :dry_run => options[:dry_run]) + compiler_opts[:quiet] = options[:quiet] if options[:quiet] compiler_opts.merge!(additional_options) Compass::Compiler.new(working_path, Compass.configuration.sass_path, diff --git a/lib/compass/configuration.rb b/lib/compass/configuration.rb index e3d28978..c51e9a88 100644 --- a/lib/compass/configuration.rb +++ b/lib/compass/configuration.rb @@ -36,7 +36,8 @@ module Compass :asset_cache_buster, :line_comments, :color_output, - :preferred_syntax + :preferred_syntax, + :disable_warnings ].flatten end diff --git a/lib/compass/configuration/adapters.rb b/lib/compass/configuration/adapters.rb index 8df04716..bde7b16d 100644 --- a/lib/compass/configuration/adapters.rb +++ b/lib/compass/configuration/adapters.rb @@ -46,6 +46,7 @@ module Compass engine_opts[:line_comments] = line_comments engine_opts[:cache] = cache engine_opts[:cache_location] = cache_path + engine_opts[:quiet] = disable_warnings if disable_warnings engine_opts.merge!(sass_options || {}) end 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/lib/compass/sass_extensions/functions/if.rb b/lib/compass/sass_extensions/functions/if.rb index 98c1591d..9f599de4 100644 --- a/lib/compass/sass_extensions/functions/if.rb +++ b/lib/compass/sass_extensions/functions/if.rb @@ -1,9 +1,9 @@ module Compass::SassExtensions::Functions::If - def if(truth, if_true, if_false) + def if(truth, if_true, if_false = nil) if truth.to_bool if_true else - if_false + if_false || Sass::Script::Bool.new(false) end end end diff --git a/test/fixtures/stylesheets/compass/config.rb b/test/fixtures/stylesheets/compass/config.rb index 141d3aed..d99a2b90 100644 --- a/test/fixtures/stylesheets/compass/config.rb +++ b/test/fixtures/stylesheets/compass/config.rb @@ -12,3 +12,5 @@ line_comments = false asset_cache_buster do |path, file| "busted=true" end + +disable_warnings = true diff --git a/test/fixtures/stylesheets/compass/css/box_shadow.css b/test/fixtures/stylesheets/compass/css/box_shadow.css new file mode 100644 index 00000000..92aa4f8b --- /dev/null +++ b/test/fixtures/stylesheets/compass/css/box_shadow.css @@ -0,0 +1,17 @@ +.box-shadow { + -moz-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; + -webkit-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; + -o-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; + box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; } + +.single-box-shadow { + -moz-box-shadow: 0px 0px 5px #333333; + -webkit-box-shadow: 0px 0px 5px #333333; + -o-box-shadow: 0px 0px 5px #333333; + box-shadow: 0px 0px 5px #333333; } + +.multiple-box-shadows { + -moz-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; + -webkit-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; + -o-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; + box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; } 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/box_shadow.scss b/test/fixtures/stylesheets/compass/sass/box_shadow.scss new file mode 100644 index 00000000..0253f4d0 --- /dev/null +++ b/test/fixtures/stylesheets/compass/sass/box_shadow.scss @@ -0,0 +1,5 @@ +@import "compass/css3/box-shadow-v2"; + +.box-shadow { @include box-shadow(default, 2px 2px 5px #222);} +.single-box-shadow { @include single-box-shadow;} +.multiple-box-shadows { @include multiple-box-shadows(default, 2px 2px 5px #222);} 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); }