3.6 KiB
title | layout | crumb | classnames | |
---|---|---|---|---|
CSS3 v2 Upgrade | tutorial | CSS3 v2 Upgrade |
|
Upgrading to Compass CSS3 v2
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.
Box Shadow
You may get a deprecation warning using the box-shadow
mixin.
You can resolve this in one of the following ways:
- Change your use of the
box-shadow
and instead usesingle-box-shadow
. This mixin has the same behavior and arguments as the oldbox-shadow
mixin. - Keep using
box-shadow
, change how you pass the arguments. The newbox-shadow
takes up to 10 comma-delimited shadows. Each shadow is how the values should appear in the CSS (space separated).
Text Shadow
You may get a deprecation warning using the text-shadow
mixin.
You can resolve this in one of the following ways:
- Change your use of the
text-shadow
and instead usesingle-text-shadow
. This mixin has the same behavior and arguments as the oldtext-shadow
mixin. - Keep using
text-shadow
, change how you pass the arguments. The newtext-shadow
takes up to 10 comma-delimited shadows. Each shadow is how the values should appear in the CSS (space separated).
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 and adjust your code appropriately. Many mixin names and constants have changed. For your convenience, the old CSS transform module can still be imported, but it is deprecated and will be removed in the next release.
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 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))