To ease the transitioning from [Compass](http://compass-style.org) (ruby/gem) to Libsass using [Compass Mixins](https://github.com/askucher/compass-sass-mixins), this module provides some of Compass asset functions for node-sass and two "copy" functions for manage the assets.

NB Please note that the functions option of node-sass is still experimental (>= v3.0.0).

The follow functions are provided:
* ```inline-image``` [Documantation](http://compass-style.org/reference/compass/helpers/inline-data/#inline-image), do not need to be defined the mime type.
* ```image-width``` [Documentation](http://compass-style.org/reference/compass/helpers/image-dimensions/#image-width).
* ```image-height``` [Documentation](http://compass-style.org/reference/compass/helpers/image-dimensions/#image-width).
* ```font-files``` [Documentation](http://compass-style.org/reference/compass/helpers/inline-data/#inline-font-files).
* ```inline-font-files``` [Documentation](http://compass-style.org/reference/compass/helpers/inline-data/#inline-font-files).
* ```copy-image``` [Documentation](#copy-functions).
* ```copy-font``` [Documentation](#copy-functions).

## Installation
```sh
npm i -S[-D] node-sass-asset-manager
```

## Configuration

The configuration is optional, but configure the plugin allow the developer to makes less mistakes and write less code.

Webpack config:

```javascript
const sassAssetManager = require('sass-asset-manager');
 
...

module: {
  rules: [
    {
      test: /\.(css|sass|scss)?$/,
      exclude: [/node_modules/],
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            outputStyle: 'compressed',
            functions: assetManager({
                images: {
                  src_root: 'src/assets/imgs/',
                  dest_root: path.resolve(__dirname, '../public/'),
                  path_prefix: '/assets/imgs/',
                  http: 'http://mydomain.com',
                },
                fonts: {
                  src_root: 'src/assets/fonts/',
                  dest_root: path.resolve(__dirname, '../public/'),
                  path_prefix: '/assets/fonts/',
                  http: 'http://mydomain.com',
                },
            }),
            includePaths: [
                path.resolve(__dirname, './node_modules/compass-mixins/lib'),
              ],
          },
      },
      ],
    },
  ],
},

...
```

* ```embed_all``` if defined all the file described as $src in 'copy' functions will be embedded into the css output, all the other settings will be ignored.
* ```src_root``` path where the images are stored in the source app folder.
* ```dest_root``` path where in the filesystem will be copied the file. If "path_prefix" is defined, will complete the path where the file will be copied.
* ```path_prefix``` it will follow ```http``` in the css output path.
* ```http``` If defined it will be the first part in the css output.

###### source:
```css
.my-class{	
	background-image: copy-image('background.png');
}
```

###### result:
```css
.my-class{	
	background-image: url('http://mydomain.com/assets/imgs/background.png');
}
```

## Copy functions
These functions allow the developer to copy the file defined in the first parameter into the path defined in the second one. Both parameters will considerate the preset defined in the plugin configuration.

* ```copy-image($src, $dest);```
This function copy the file described in ```$src``` path paramenter in the ```$dest``` path paramenter.
The ```$dest``` paramenter is optional if ```path_prefix``` is defined in the plugin configutation and it will be added to this last in the css output if defined.
If the path described in ```$dest``` starts with ```~``` the path portion described in ```path_prefix``` will be ignored.


* ```copy-font($src, $dest, $urlWrap);```
Same roles like ```copy-image```, just ```$urlWrap``` (true by default), have to be turned to ```false``` if the function is used inside the ```font-files``` function as in the example below. If ```$dest``` is not defined because the path used is defined in ```path_prefix```, ```$urlWrap``` it can be the second paramenter.

NB. The default ```font-face``` compass-mixin retutn a ```font-url()``` in the css output intead the standard ```url()``` function, so it is better use a custom version of the mixin just before use the functionality as below.

```css
@mixin font-face(
  $name,
  $font-files,
  $eot: false,
  $weight: false,
  $style: false
) {
  $iefont: unquote("#{$eot}?iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: url($eot);
      $font-files: url($iefont) unquote("format('eot')"), $font-files;
    }
    @if $weight { font-weight: $weight; }
    @if $style { font-style: $style; }
    src: $font-files;
  }
}

@include font-face(
  'MyFontFamily',
  font-files(
    copy-font('MyFont.woff2',false),    /* Super Modern Browsers */
    copy-font('MyFont.woff',false),     /* Pretty Modern Browsers */
    copy-font('MyFont.ttf',false),        /* Safari, Android, iOS */
    copy-font('MyFont.svg#FontName',false)  /* Legacy iOS */
  ),
  copy-font('MyFont.eot',false),        /* IE9 Compat Modes and IE6-IE8 */
  'normal',                             /* font-weight */
  'italic'                              /* font-style */
);
```