Have ideas to improve npm?Join in the discussion! »

parse-sass-value
TypeScript icon, indicating that this package has built-in type declarations

2.3.0 • Public • Published

parse-sass-value

Greenkeeper badge Travis

Simple value parser, from JavaScript to SASS (Scss).

Usage

The module is just a function to compile values to SASS (Scss).

const parse = require('parse-sass-value');
 
let background = parse('12px');
 
let theme = {
  parent: null,
  name: 'flat-green',
  width: '100%',
  height: '12rem',
  font: ['Roboto', 'sans-serif'],
  colors: {
    primary: '#1abc9c'
  },
  childs: 4
};
 
let sassTheme = parse(theme, {
  quotes: 'single',
  separator: 'comma'
});
 
/*
(
  parent: null,
  name: 'flat-green',
  width: 100%,
  height: 12rem,
  font: ('Roboto', 'sans-serif'),
  colors: (
    primary: #1abc9c
  ),
  childs: 4
)
*/

Workaround with Gulp

const gulp = require('gulp');
const header = require('gulp-header');
const parseValue = require('parse-sass-value');
const sass = require('gulp-sass');
const vars = object => header(
  Object
    .keys(object)
    .map(key => `$${key}${parseValue(object[key])};`)
    .join('\n');
);
 
gulp.task('compile', () => {
  let settings = {
    theme: 'default',
    parent: null,
    colors: {
      primary: 'rgb(255, 0, 0)',
      borders: '#ff0'
    },
    cols: 12,
    breakpoints: ['544px', '768px', '1024px', '1366px']
  };
 
  return gulp
    .src('./src/sass/*.scss')
    .pipe(vars(settings, { quotes: 'single' }))
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'));
});

Options

quotes

Set string comma character. Options: 'single' or 'double'.

separator

Set maps and lists separator character. Options: 'comma' or 'space'.

Keywords

Install

npm i parse-sass-value

DownloadsWeekly Downloads

1,268

Version

2.3.0

License

MIT

Unpacked Size

10.4 kB

Total Files

7

Last publish

Collaborators

  • avatar