sass Compass CSS3 Mixins Using CSS3 with compass
Example
You can find a complete reference which CSS3 components are supported on this page
In order to use CSS3 in your project Compass provides mixins to support CSS3 features in every browser. On top of your Sass/Scss file you have to specify that you want to use compass
@import "compass/css3";
Border-radius
Include border-radius with compass in your sass file:
div {
@include border-radius(4px);
}
CSS output
div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
As you can see you can use the normal CSS name. Just put @include in front of it and use ( ) to set your value.
Flexbox Example
.row {
@include display-flex;
@include flex-direction(row);
}
CSS Output
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
Conclusion
This are only two examples. Compass provides much more CSS3 mixins. It is very handy to use Compass and you don't have to worry that you have forgot defining a CSS3 component for a specified browser. If the browser supports the CSS3 feature, compass will define it for you.
