1.6.2 sass.mixins.image-url image-url()

If you include your images next to your component Sass files, you need to specify a url() to point from the generated CSS to the Sass source like this:

content: url(../sass/components/is-quite/long.svg);

With the image-url() function the path to all your components is assumed to start with ../sass/components/ and you just need to give it the last, short bit of the path in your Sass code like this:

content: image-url(is-quite/short.svg);

If you want to point at an image that is not in the components sub-directory of your sass directory, you can override the default $subdirectory by passing it in as the first parameter of image-url() like this:

content: image-url(base, grouping/blockquote.svg);

which would output url(../sass/base/grouping/blockquote.svg).

Parameters:
  • $subdirectory
    Optional. The relative path from the root of your Sass source to the sub-directory where components usually lie.
    Defaults to: $image-url-subdirectory
  • $path
    Required. The path to the image relative to the $subdirectory.
  • $path-to-source
    Optional. The relative path from the css build directory to the sass source directory.
    Defaults to: $image-url-path-to-source
Source: init/image-url/_image-url.scss, line 6