32 | Stretching 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 stretch an element, it won’t completely reach the edge of your container box.
You can also stretch the element in either the x-axis (horizontally) or y-axis (vertically) only.
What To Do... |
compass/stretch.scss | |
| .stretch_box { |
| border: 2px solid black; |
| width: 240px; |
| height: 240px; |
| position: relative; |
| @include inline-block; } |
compass/stretch.scss | |
| .stretched_fully { |
| @extend .blue_button; |
| @include stretch; } |
compass/stretch.scss | |
| .stretched_with_gap { |
| @extend .blue_button; |
| @include stretch(12px, 12px, 12px, 12px); } |
compass/stretch.scss | |
| .stretched_horizontally { |
| @extend .blue_button; |
| @include stretch-x; } |
Appropriately, if you want to stretch it vertically, just use stretch-y instead.
| <div class="stretch_box"> |
| <div class="stretched_fully"> |
| Stretched fully! |
| </div> |
| </div> |