Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Image width and height helpers


There are also a couple of image helpers for automatically determining an image's height or width. Therefore, as long as we're not using SVG images (as they are vector-based they can have indeterminate dimensions), we can use these helpers to automatically get and set the height and width of appropriate CSS properties:

.buy-amazon-uk {
  display: block;
  background-image: image-url("amazon-co-uk.png");
  background-size: image-width("amazon-co-uk.png") image-height("amazon-co-uk.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: image-height("amazon-co-uk.png");
  width: image-width("amazon-co-uk.png");
}

In this example, we are using these helpers to not only set the background-size property but also set the image width and height. Here's the relevant CSS that compiles to:

.buy-amazon-uk {
  background-image: url('../img/amazon-co-uk.png?1357598801');
  background-size: 223px 50px;
  background-position: 50% 50%;
  background-repeat...