https://github.com/henrahmagix/node-sass-relative-asset-url

[Experimental] Relative path output for image-url and font-url Sass functions
https://github.com/henrahmagix/node-sass-relative-asset-url

Last synced: 19 days ago
JSON representation

[Experimental] Relative path output for image-url and font-url Sass functions

• Host: GitHub
• URL: https://github.com/henrahmagix/node-sass-relative-asset-url
• Owner: henrahmagix
• Created: 2016-09-20T15:40:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-09-20T15:51:19.000Z (over 8 years ago)
• Last Synced: 2024-12-11T20:06:32.854Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.95 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# node-sass-relative-asset-url – _Experimental_

Relative path output for image-url and font-url Sass functions.

See `assetUrl` function in the gulpfile.

## Important bit

This requires `this.options.file` inside the node-sass function. It is a reference to the Sass file being rendered.

node-sass says the `functions` property of the renderer is experimental, so **this is likely to change.** Without `this.options.file` or a similar property, this functionality is not possible.

`this.options.outFile` – the path to the output CSS file – would be preferred, but is `null` at the point of this function call.

## Input

```sass

// main.sass

body

    background-image: image-url('myimage.png')

```

```sass

// nested/nested.sass

.nested

    background-image: image-url('nested/mynestedimage.png')

```

## Output

```css

/* main.css */

body {

  background-image: url('../media/images/myimage.png'); }

```

```css

/* nested/nested.css */

.nested {

  background-image: url('../../media/images/nested/mynestedimage.png'); }

```