sass Compass CSS3 Mixins Using CSS3 with compass

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

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.



Got any sass Question?