https://github.com/sparkbox/splinter

🐭 Parse and split SCSS files based on functions and mixins.
https://github.com/sparkbox/splinter

ast postcss scss

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sparkbox/splinter
• Owner: sparkbox
• Created: 2016-12-06T15:10:13.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-10-02T22:33:47.000Z (about 1 year ago)
• Last Synced: 2024-11-09T07:48:04.200Z (6 days ago)
• Topics: ast, postcss, scss
• Language: JavaScript
• Homepage:
• Size: 430 KB
• Stars: 2
• Watchers: 18
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![CircleCI](https://circleci.com/gh/sparkbox/splinter.svg?style=shield)](https://circleci.com/gh/sparkbox/splinter)

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.

```js

  const parse = 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.

```js

  const fs = require('fs');

  const parse = require('scss-splinter');

  const nodeSass = require('node-sass');

  parse({

    partial: 'src/scss/_brands.scss',

    base: 'src/scss/_base.scss',

    keyword: 'split',

  })

  .then((scss) => {

    const compiledGlobal = 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:

```js

  const parse = require('scss-splinter');

  parse({

    partial: '_brands.scss',

    base: '_base.scss',

    keyword: 'split',

    cwd: 'i/keep/my/scss/files/here',

  })

```