Skip to content

Repository files navigation

CircleCI

scss-splinter enables the creation of multiple stylesheets from a common set of modules with minimal effort via SCSS mixins and functions.

Usage

scss-splinter accepts an options object that specifies a partial, a base, and a optional keyword to grep for.

constparse=require('scss-splinter');parse({partial: 'src/scss/_brands.scss',base: 'src/scss/_base.scss',keyword: 'split',})
  1. Partial is the name of the file that scss-splinter will generate with "split" code, e.g. code that is specified in the matching mixin or sass-function.

  2. Base is the name of the main sass index file in a project. This is the file scss-splinter will use to find all the files it needs to parse.

scss-splinter fills the partial file with "split" scss and returns a promise that contains "global" scss. It's up to the project to determine what to do with this global string. One approach would be to run the string through node-sass and write the compiled css to a file.

constfs=require('fs');constparse=require('scss-splinter');constnodeSass=require('node-sass');parse({partial: 'src/scss/_brands.scss',base: 'src/scss/_base.scss',keyword: 'split',}).then((scss)=>{constcompiledGlobal=nodeSass.renderSync({data: scss,});fs.writeFileSync('global.css',compiledGlobal.css.toString());});

cwd

If your SCSS files are not located at src/scss, you can pass cwd in the params:

constparse=require('scss-splinter');parse({partial: '_brands.scss',base: '_base.scss',keyword: 'split',cwd: 'i/keep/my/scss/files/here',})

About

🐭 Parse and split SCSS files based on functions and mixins.

Topics

Resources

Stars

2 stars

Watchers

16 watching

Forks

Releases

Packages

Used by

Contributors

Languages