Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Using Compass Mixins to Reduce HTTP Requests

Page of 168

Justifying Base-64 Encoding

Making HTTP transactions on a mobile device is very expensive from a performance standpoint. You should always do whatever you can to minimize data and resource requests, even if doing so results in your application having a larger memory footprint.

As a best practice, you should serialize the images, iconography, and custom fonts that are used within your application by using base-64 encoding. Converting the binary image data to text enables you to store the image data within your application's CSS file. Since the CSS file can be cached by the browser and is one of the first files to load, you can be assured that your artwork will appear as soon as it is requested by the user.

Encoding Images as Base-64

As illustrated below, Compass includes a base-64 encoding function named inline-image(filename) that reads the specified file from the compass images folder and encodes it as text. You should use this function to optimize delivery for all of your background image artwork.

.x-toolbar-dark, .x-tabbar-dark {
   
   background-image: inline-image('top-grain.png'), -webkit-radial-gradient(top center, circle, #9f5628, #5d2f17);
   background-repeat: repeat-x;
}

Generates the following:

.x-toolbar-dark, .x-tabbar-dark {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAAAAASUVORK5CYII='), -webkit-radial-gradient(top center, circle, #9f5628, #5d2f17);
  background-repeat: repeat-x;
}

(Note: The data url has been truncated for display on this web page)


Encoding Fonts as Base-64

Use the inline-font-files([$font, $format]) mixin to embed a font into your stylesheet, thereby reducing the number of http transactions required to display a downloadable font.

The following example embeds a font file directly into your stylesheet. In this particular case, the Rambla.woff file would need to be placed into the /path/to/App/resources/sass/stylesheets/fonts folder.

@import "compass/css3";
@include font-face("Rambla", inline-font-files('Rambla.woff', woff));

Output:

@font-face {
  font-family: "Rambla";
  src: url('data:application/x-font-woff;base64,d09GRgABAAAAAEQQAA8A...') format('woff');
}

Note: The Google Terms of Service do not allow you to embed their web fonts directly into your stylesheet.

Configuring File Paths for Compass

Configuring Compass File Paths

The location of your font and image files must be set within your config.rb file as illustrated below. Note the following:

  • The images_path variable points to the fully qualified directory name of the root folder for your image files
  • The fonts_path variable points to the fully qualified directory name of the root folder for your font files
  • The full reference for Compass configuration options is located at http://compass-style.org/help/tutorials/configuration-reference/
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', '../touch', 'resources', 'themes')

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")

# Require any additional compass plugins here.
images_path = File.join(dir, "..", "images")
fonts_path =  File.join(dir, "..", "fonts")

output_style = :compressed
environment = :production
Page of 168
comments powered by Disqus