Converts a list of files to (a map of) Sass variables with their content.
GitHub | NPM | @jelmerdemaat
Early beta: see todo for functionality that's not yet included.
filesToSass(options, callback(Object fileList));
Use as follows:
var filesToSass = require('files-to-sass');
filesToSass({
src: '/path/to/source/folder/',
dest: '/path/to/dest/file.scss',
sassMap: true,
sassMapName: 'MyFiles',
debug: true
}, callback);
Using Gulp it's possible to access this module directly:
var filesToSass = require('files-to-sass');
gulp.task('import', function () {
filesToSass({
src: '/path/to/source/folder/',
dest: '/path/to/dest/file.scss',
sassMap: true,
sassMapName: 'MyFiles',
debug: true
});
});
Example output, using SVG's as input, would be:
$logo: '<svg width="58" height="56" viewBox="0 0 58 56"><g fill="#163962"...';
$icon-download: '<svg width="12" height="12" viewBox="0 0 12 12"><g fill="#000"...';
$icon-arrow-right: '<svg width="15" height="15" viewBox="0 0 15 15"><g fill="#fd0"...';
And using the Sass map functionality:
$fileMap: (
logo: '<svg width="58" height="56" viewBox="0 0 58 56"><g fill="#163962"...',
icon-download: '<svg width="12" height="12" viewBox="0 0 12 12"><g fill="#000"...',
icon-arrow-right: '<svg width="15" height="15" viewBox="0 0 15 15"><g fill="#fd0"...'
);
Required. Sets the path to the source folder.
Required. Sets the path and name of the destination Sass file, including extension.
Optional. Set to true if you want to see which files are being processed.
Default: false
Optional. Set to true if you want to output a Sass map.
Default: false
Optional. String to be used as the Sass map variable name. The $
will be prepended.
Default: fileMap
Optional. Only available when using Sass maps and (SVG) images. Returns width and height in addition to the file contents.
Default: false
- Switch to async module structure.
- Add ability to use files as source input.
Add the output folder if it doesn't exist already.Add option to use maps in stead of plain variables.Thanks @sebsmi