Chapter 7 Easy CSS3, image sprites and more with Compass
In this chapter of 'Sass and Compass for Designers' you will get to grips with some of the key features of Compass.
Compass makes many mundane tasks trivial. In this chapter, amongst other thinfs, you will learn how to use Compass to:
- Create easy cross-browser CSS3 (gradients, box-shadows, tranforms, transitions and more)
- Create data URIs from assets
- Make image sprites effortlessly
One syntax produces perfect cross browser styles:
@include background(linear-gradient(to right, blue 0%, purple 100%));
Simple data URIs for embedding assets in the style sheet
background-image: inline-image("svg/amazon-us.svg");
Easy fallbacks and image links
.no-svg & {
background-image: image-url("png/amazon-us.png");
}
Now you're really getting a handle on this pre-processor malarkey. Let's up the ante. In Chapter 8 we will look at automating repetitive CSS with logic. We'll look at @for
, @each
and @if
loops, creating @functions
and performing math.