github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add upgrading documentation on gradients.

Browse Source
This commit is contained in:
Chris Eppstein 2010-11-20 09:11:58 -08:00
parent 1d7882b9e6
commit f61e50e229
1 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
doc-src/content/tutorials/upgrading/css3-v2.markdown
View File

@ -28,6 +28,7 @@ to `compass/css3/box-shadow-v2` once you do one of the following choices:
`box-shadow` takes up to 10 comma-delimited shadows. Each shadow is `box-shadow` takes up to 10 comma-delimited shadows. Each shadow is
how the values should appear in the CSS (space separated). how the values should appear in the CSS (space separated).
<a name="text-shadow"></a>
## Text Shadow ## Text Shadow
Similarly to how the box shadow changed. The new [text-shadow][new_text_shadow] Similarly to how the box shadow changed. The new [text-shadow][new_text_shadow]
@ -41,13 +42,45 @@ the following choices:
`text-shadow` takes up to 10 comma-delimited shadows. Each shadow is `text-shadow` takes up to 10 comma-delimited shadows. Each shadow is
how the values should appear in the CSS (space separated). how the values should appear in the CSS (space separated).
<a name="transform"></a>
## CSS Transforms ## CSS Transforms
The transform module was largely re-written to support 3D transforms. If you The transform module was largely re-written to support 3D transforms. If you
are using it, it is suggested that you read the [new module's documentation][new_transform] are using it, it is suggested that you read the [new module's documentation][new_transform]
and adjust your code appropriately. Many mixin names and constants have changed. and adjust your code appropriately. Many mixin names and constants have changed.
<a name="gradients"></a>
## Gradients
The Compass gradient support now more closely emulates the CSS3 specification of how gradients
are represented and passed around. The `linear-gradient` and `radial-gradient` mixins
have been deprecated and instead, you should use the `linear-gradient()` and `radial-gradient()`
functions in conjunction with mixins for the [properties that support gradients][image_stylesheet] like
`background` / `background-image`, `border-image`, `list-style` / `list-style-image`,
and `content`.
After upgrading, you'll receive deprecation warnings for your usage of the old gradient
mixins and a suggested replacement value for each. If you'd rather keep the old mixins in
your project for convenience, just copy the following to your project after changing your imports:
@mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
@include background-image($image, radial-gradient($center-position, $color-stops));
}
@mixin linear-gradient($color-stops, $start: top, $image: false) {
@include background-image($image, linear-gradient($start, $color-stops));
}
Or for sass files:
=radial-gradient($color-stops, $center-position: center center, $image: false)
+background-image($image, radial-gradient($center-position, $color-stops))
=linear-gradient($color-stops, $start: top, $image: false)
+background-image($image, linear-gradient($start, $color-stops))
[old_box_shadow]: /docs/reference/compass/css3/box_shadow/#mixin-box-shadow [old_box_shadow]: /docs/reference/compass/css3/box_shadow/#mixin-box-shadow
[new_box_shadow]: /docs/reference/compass/css3/box_shadow_v2/#mixin-box-shadow [new_box_shadow]: /docs/reference/compass/css3/box_shadow_v2/#mixin-box-shadow
[old_text_shadow]: /docs/reference/compass/css3/text_shadow/#mixin-text-shadow [old_text_shadow]: /docs/reference/compass/css3/text_shadow/#mixin-text-shadow
[new_text_shadow]: /docs/reference/compass/css3/text-shadow-v2/#mixin-text-shadow [new_text_shadow]: /docs/reference/compass/css3/text-shadow-v2/#mixin-text-shadow
[new_transform]: /docs/reference/compass/css3/transform-v2/ [new_transform]: /docs/reference/compass/css3/transform-v2/
[image_stylesheet]: /docs/reference/compass/css3/images/