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

Testing the real-world difference between inline and grouped media queries


As I'm arguing that the difference between media queries grouped together and those written inline is so negligible as to be irrelevant, I'd better back that up with a little empirical evidence.

To illustrate the point, indulge me in a simple test. By the end of this chapter, there are 20 media queries defined inline for the http://sassandcompass.com site we are building.

First of all, uncompressed, the file size of the CSS itself is 14.1 KB (14,145 bytes).

If that uncompressed CSS file is gzipped, the file size comes down to 3 KB (3,058 bytes).

Let's back up and compress that CSS with Sass (using the output_style = :compressed option in the config.rb file). At this point, the file size comes down to 11.8 KB (11,805 bytes). This is as opposed to 14.1 KB/14,145 bytes uncompressed.

If the compressed CSS file is then gzipped, the size still only comes down to 2.7 KB (2,785 bytes). This is a slight improvement over the 3KB...