O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

32Stretching Elements

One of the handy mixins in Compass is used for stretching. Its purpose is pretty straightforward: it allows you to stretch an element to fit into a box.

We need to define the space into which the element will be stretched, which is what we do when we’re defining the stretch_box class. We also need something to stretch; in this case we’re going to use the blue button from Task 15, Keeping It Semantic: @extend.

At the top of your style sheet, you need to @import three stretching compass files: compass/layout/stretching, compass/utilities and compass/css3. Then all you need to do is @include the mixin wherever you need a class or ID to be stretched. A useful feature is that you can define an offset border, so that when you ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required