97 lines
4.4 KiB
Markdown
97 lines
4.4 KiB
Markdown
---
|
|
title: Compass v0.11 Upgrade
|
|
layout: tutorial
|
|
crumb: Upgrading to v0.11
|
|
classnames:
|
|
- tutorial
|
|
---
|
|
# Upgrading to the Compass Antares Release (v0.11)
|
|
|
|
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.
|
|
|
|
You should read about what changed, update your stylesheets accordingly
|
|
and then update your imports to the new version.
|
|
|
|
<a name="box-shadow"></a>
|
|
## Box Shadow
|
|
You may get a deprecation warning using the `box-shadow` mixin.
|
|
You can resolve this in one of the following ways:
|
|
|
|
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>
|
|
## Text Shadow
|
|
|
|
You may get a deprecation warning using the `text-shadow` mixin.
|
|
You can resolve this in one of the following ways:
|
|
|
|
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>
|
|
## 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.
|
|
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.
|
|
|
|
<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))
|
|
|
|
<a name="typography"></a>
|
|
## Typography Module
|
|
|
|
With the addition of vertical-rhythms to the compass core, we have created a new
|
|
[typography module][typography_module], and moved several items that were formerly
|
|
listed as "utilities" into it. The moved modules are "links", "lists" and "text".
|
|
These will all remain part of the basic compass include, but if you were including
|
|
them individually in your stylesheets, you will need to adjust the include paths
|
|
as follows:
|
|
|
|
* "compass/utilities/links" becomes "compass/typography/links"
|
|
* "compass/utilities/lists" becomes "compass/typography/lists"
|
|
* "compass/utilities/text" becomes "compass/typography/text"
|
|
|
|
|
|
[new_transform]: /reference/compass/css3/transform/
|
|
[old_transform]: /reference/compass/css3/transform-legacy/
|
|
[image_stylesheet]: /reference/compass/css3/images/
|
|
[typography_module]: /reference/compass/typography/ |