webmasterish/sass-parser

A simple npm package to parse a Sass file into a consumable json data

Sass Parser

A simple npm package to parse a sass file into a consumable json data

What it does

This is a simple package that does a simple task of going through a sass file and extracting relevant details of variables, mixins, and functions contained within that file.

Currently it only supports sass old syntax; meaning, it does NOT handle the newer scss syntax. For more details about this, have a look at Sass Syntax.

The extracted data is useful for usage in documentation or any other similar needs.

Install

$ npm install sass-parser

Usage

Parsing a file

const parse = require('sass-parser')();

parse.file('index.sass').then( data => console.log( data ) );

Output of parse.file

{
  variables: {
    var_1: {
      id: 'var_1',
      name: '$var_1',
      value: '#000'
    },
    var_2: ...,
    var_3: ...
  },
  mixins: {
    mix_1: {
      name: 'mix_1',
      parameters: [
        '$param_1',
        ...
      ]
    },
    mix_2: ...,
    mix_3: ...
  },
  functions: {
    fn_1: {
      name: 'fn_1',
      parameters: [
        '$param_1',
        ...
      ]
    },
    fn_2: ...,
    fn_3: ...
  }
}

Parsing a variable

parse.variable( '$white: #fff !default' );

// output
{
  id: 'white',
  name: '$white',
  value: '#fff'
}

Parsing a mixin

parse.mixin( '=mix( $color )' );

// output
{
  name: 'mix',
  parameters: [
    '$color'
  ]
}

Parsing a function

parse.function( '@function do_something( $this, $that )' );

// output
{
  name: 'do_something',
  parameters: [
    '$this',
    '$that'
  ]
}

Options

Default options:

{
  regex: {
    variable: {
      pattern: '^\\$(.*?):\\s*([^;]+)\\s*([^;]+)\\!(global|default)',
      flags  : 'g',
    },
    mixin_name: {
      pattern: '^=((?!\\d)[\\w_-][\\w\\d_-]*)',
      flags  : 'gi',
    },
    mixin: {
      pattern: '^=((?!\\d)[\\w_-][\\w\\d_-]*)\\s*\\(\\s*([^\\)"]+)?.',
      flags  : 'gi',
    },
    function_name: {
      pattern: '^@function\\s*?((?!\\d)[\\w_-][\\w\\d_-]*)',
      flags  : 'gi',
    },
    function: {
      pattern: '^@function\\s*?((?!\\d)[\\w_-][\\w\\d_-]*)\\s*\\(\\s*([^\\)"]+)?.',
      flags  : 'gi',
    },
  },

  // ---------------------------------------------------------------------------
  
  line_by_line: {
    skipEmptyLines: true,
  },

  // ---------------------------------------------------------------------------
  
  keys: {
    
    variables: 'variables',
    variable : {
      id    : 'id',
      name  : 'name',
      value : 'value',
    },

    // -------------------------------------------------------------------------
    
    mixins: 'mixins',
    mixin : {
      name      : 'name',
      parameters: 'parameters',
    },

    // -------------------------------------------------------------------------
    
    functions: 'functions',
    function : {
      name      : 'name',
      parameters: 'parameters',
    },
    
  }
}

Example of using custom options:

const parser = require('sass-parser');
const parse  = parser({
  keys: {
    variables: 'vars',
    mixin: {
      parameters: 'param',
    },
    function: {
      name: 'fn',
    }
  }
});

parse.file('index.sass').then( data => console.log( data ) );

Output after applying custom options

{
  vars: {           // <== now it's 'vars' instead of 'variables'
    var_1: {
      id: 'var_1',
      name: '$var_1',
      value: '#000'
    },
    var_2: ...,
    var_3: ...
  },
  mixins: {
    mix_1: {
      name: 'mix_1',
      param: [      // <== now it's 'param' instead of 'parameters'
        '$param_1',
        ...
      ]
    },
    mix_2: ...,
    mix_3: ...
  },
  functions: {
    fn_1: {
      fn: 'fn_1',   // <== now it's 'fn' instead of 'name'
      parameters: [
        '$param_1',
        ...
      ]
    },
    fn_2: ...,
    fn_3: ...
  }
}

API

Table of Contents

• options
• variable
• chunk
• function
• mixin
• file

options

Default options are set here.

Can be extended when requiring the module by passing a custom options object.

variable

Parses line to get sass variable

Parameters

• line string

Returns object

chunk

Parses line to get sass mixin or function

Parameters

• line string
• what string

Returns object

function

Parses line to get sass function

Parameters

• line string

Returns object

mixin

Parses line to get sass mixin

Parameters

• line string

Returns object

file

Parses a sass file line by line and populates returned data with variables, mixins and functions

Parameters

• file string

Returns promise

License

MIT © webmasterish