Converts a list of files to (a map of) Sass variables with their content.
GitHub | NPM | @jelmerdemaat
Don't use if you're not me or Michel! Yet.
Use as follows:
var filesToSass = require('files-to-sass');
filesToSass({
src: '/path/to/source/folder/',
dest: '/path/to/dest/file.scss',
useSassMap: true, // default is false
sassMapName: 'MyFiles', // defaults to: 'fileMap'
debug: true
});
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',
useSassMap: 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"...';
With SassMap:
$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.
Optional. Set to true if you want to output a Sass map.
Optional. String to be use as the Sass map variable name the $ will be prepended.
- Add ability to use files as source input.
- Add option to use maps in stead of plain variables.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent