Last Updated: February 25, 2016
· fiveisprime

Compass URL helpers

In config.rb:

http_images_path = '/path/to/images/'
http_fonts_path = '/path/to/fonts/'

relative_assets = false

URL helpers in your .scss (you can use underscore or dash):

.my-class {
    // Using a dash.
    background: image-url('sprites.png');

@font-face {
    // Using underscore.
    font-family: 'my-custom-font';
    src: font_url('my-custom-font.eot');
    src: font_url('my-custom-font?#iefix') format('embedded-opentype'),
        font_url('my-custom-font.woff') format('woff'),
        font_url('my-custom-font.ttf') format('truetype'),
        font_url('my-custom-font.svg#my-custom-font') format('svg');
    font-weight: normal;
    font-style: normal;

2 Responses
Add your response

Thanks for this! Helped me with a workflow solution.

over 1 year ago ·

Many thanks! This worked when I tried to use with Meteor JS Framework!

over 1 year ago ·