Sass Parser
A simple npm package to parse a
sass
file into a consumablejson
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 = ; parse;
parse.file
Output of 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; // output id: 'white' name: '$white' value: '#fff'
Parsing a mixin
parse; // output name: 'mix' parameters: '$color'
Parsing a function
parse; // 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 = ;const parse = ; parse;
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
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
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 © bstashio