compass/doc-src/content/help/tutorials/upgrading/antares.markdown

81 lines
3.7 KiB
Markdown
Raw Normal View History

2010-11-16 01:27:46 +00:00
---
2010-11-22 16:46:31 +00:00
title: Compass v0.11 Upgrade
2010-11-16 01:27:46 +00:00
layout: tutorial
2010-11-22 16:46:31 +00:00
crumb: Upgrading to v0.11
2010-11-16 01:27:46 +00:00
classnames:
- tutorial
---
2010-11-22 16:46:31 +00:00
# Upgrading to the Compass Antares Release (v0.11)
2010-11-22 08:28:55 +00:00
Many mixins and certain uses of mixins have been deprecated, but your
existing stylesheets should still work out of the box with one exception:
users who are using the `css3/transform` module should update their imports
to import `css/transform-legacy` when they upgrade. They should then upgrade
to the new `css/transform` module at their convenience.
2010-11-15 11:46:44 +00:00
You should read about what changed, update your stylesheets accordingly
and then update your imports to the new version.
2010-11-16 01:27:46 +00:00
<a name="box-shadow"></a>
## Box Shadow
2010-11-22 08:28:55 +00:00
You may get a deprecation warning using the `box-shadow` mixin.
You can resolve this in one of the following ways:
2010-11-16 01:27:46 +00:00
1. Change your use of the `box-shadow` and instead use `single-box-shadow`.
This mixin has the same behavior and arguments as the old `box-shadow` mixin.
2. Keep using `box-shadow`, change how you pass the arguments. The new
`box-shadow` takes up to 10 comma-delimited shadows. Each shadow is
how the values should appear in the CSS (space separated).
<a name="text-shadow"></a>
2010-11-16 01:27:46 +00:00
## Text Shadow
2010-11-22 08:28:55 +00:00
You may get a deprecation warning using the `text-shadow` mixin.
You can resolve this in one of the following ways:
2010-11-16 01:27:46 +00:00
1. Change your use of the `text-shadow` and instead use `single-text-shadow`.
This mixin has the same behavior and arguments as the old `text-shadow` mixin.
2. Keep using `text-shadow`, change how you pass the arguments. The new
`text-shadow` takes up to 10 comma-delimited shadows. Each shadow is
how the values should appear in the CSS (space separated).
<a name="transform"></a>
2010-11-16 01:27:46 +00:00
## CSS Transforms
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]
and adjust your code appropriately. Many mixin names and constants have changed.
2010-11-22 08:28:55 +00:00
For your convenience, the [old CSS transform module][old_transform] can still be imported, but it
is deprecated and will be removed in the next release.
2010-11-16 01:27:46 +00:00
<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))
2010-11-22 08:28:55 +00:00
[new_transform]: /reference/compass/css3/transform/
[old_transform]: /reference/compass/css3/transform-legacy/
[image_stylesheet]: /reference/compass/css3/images/