Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

sass-export

Package Overview
Dependencies
Maintainers
2
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sass-export

Exports Sass files to Json format, able to manage sections with annotations in comments.

  • 2.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

Sass-Export

Sass-export takes SCSS files and export them to a JSON file you can use as data. This is perfect for generating your site documentation.

Build Status Total Downloads Donate via Patreon

Try it online: Playground (demo)

CLI

Install it from NPM

 npm install -g sass-export

Ready to export:

 sass-export scss/config/*.scss -o exported-sass-array.json -a

Here's a sample output

input: _variables.css

  $gray-medium: #757575;
  $base-value: 25px;
  $gray-dark: darken($gray-medium, 5%);
  $logo: url(logo.svg);
  $logo-quotes: url('logo.svg');
  $calculation: $base-value - 12px;
  $multiple-calculations: $base-value - floor(12.5px);

output: exported-sass-array.json

[
  { "name": "$gray-medium", "value": "#757575", "compiledValue": "#757575" },
  { "name": "$base-value", "value": "25px", "compiledValue": "25px" },
  { "name": "$gray-dark", "value": "darken($gray-medium, 5%)", "compiledValue" :"#686868" },
  { "name": "$logo", "value": "url(logo.svg)", "compiledValue": "url(logo.svg)" },
  { "name": "$logo-quotes", "value": "url('logo.svg')", "compiledValue": "url(\"logo.svg\")" },
  { "name": "$calculation", "value": "$base-value - 12px", "compiledValue": "13px" },
  { "name": "$multiple-calculations", "value": "$base-value - floor(12.5px)", "compiledValue": "13px" }
]

Section Groups Annotations

You can easily organize your variables into a Javascript object using sass-export annotations:

input: _annotations.scss

$black: #000;
$slate: #8ca5af;

/**
 * @sass-export-section="brand-colors"
 */
$brand-gray-light: #eceff1;
$brand-gray-medium: #d6d6d6;
$brand-gray: #b0bec5;
//@end-sass-export-section [optional]

/**
 * @sass-export-section="fonts"
 */
$font-size: 16px;
$font-color: $brand-gray-medium;
//@end-sass-export-section

$global-group: #FF0000;

Then we run sass-export:

 sass-export scss/_annotations.scss -o exported-grouped.json

output exported-grouped.json

{
    "variables": [
        { "name": "$black", "value": "#000", "compiledValue": "#000" },
        { "name": "$slate", "value": "#8ca5af", "compiledValue": "#8ca5af" },
        { "name": "$global-group", "value": "#ff0000", "compiledValue": "#ff0000" }
    ],
    "brand-colors": [
        { "name": "$brand-gray-light", "value": "#eceff1", "compiledValue":"#eceff1" },
        { "name": "$brand-gray-medium", "value": "#d6d6d6" ,"compiledValue":"#d6d6d6" },
        { "name": "$brand-gray", "value": "#b0bec5", "compiledValue": "#b0bec5" }
    ],
    "fonts": [
        { "name": "$font-size", "value": "16px", "compiledValue": "16px" },
        { "name": "$font-color", "value": "$brand-gray-medium", "compiledValue":"#d6d6d6" }
    ]
}

Include Paths for @import

In order to support @import we need to include --dependencies parameter with a comma separated list of the folder path to include:

sass-export scss/_fonts.scss -o=exported-dependencies.json  -d "src/sass/config/, src/sass/libs/"

in order to use:

@import "breakpoints";
@import "variables";

$imported-value: $bp-desktop;
$font-size: $global-font-size;

Map support

In case you wanted your sass Maps variable to be an array we included te mapValue property for variables identified as maps.

input: _breakpoints.scss

$breakpoints: (
  small: 767px,
  medium: 992px,
  large: 1200px
);

output: exported-maps.json

{
  "variables": [
    {
      "name": "$breakpoints",
      "value": "(small: 767px,  medium: 992px,  large: 1200px)",
      "mapValue": [
        { "name": "small", "value": "767px", "compiledValue": "767px" },
        { "name": "medium","value": "992px", "compiledValue": "992px" },
        { "name": "large", "value": "1200px", "compiledValue": "1200px" }
      ],
      "compiledValue": "(small:767px,medium:992px,large:1200px)"
    }
}

Mixin/Function support

For mixins and functions we've added a reserved 'mixins' group for it.

input: _mixins.scss

@mixin box($p1, $p2) {
  @content;
}

@function my-function($val) {
}

@mixin z($val: 10px, $p2: '#COFF33') {
  @content;
}

@mixin no-params() {
}

output: exported-mixins.json

{
  "mixins": [
    {
      "name": "box",
      "parameters": [ "$p1", "$p2" ]
    },
    {
      "name": "my-fucntion",
      "parameters": [ "$val" ]
    },
    {
      "name": "z",
      "parameters": [ "$val: 10px", "$p2: '#COFF33'" ]
    },
    {
      "name": "no-params",
      "parameters": []
    }
  ]
}

Import it in your Node App?

import syntax:

 import { exporter } from 'sass-export';

Require syntax:

const exporter = require('sass-export').exporter;

const exporterBuffer = require('sass-export').buffer;

Example

Written using ES5 syntax.


const exporter = require('sass-export').exporter;

//basic options
const options = {
  inputFiles: ['_variables.scss', '_fonts.scss'],
  includePaths: ['libs/'] // don't forget this is the folder path not the files
};

// you can get an object {variables:[], colors: []}
const asObject = exporter(options).getStructured();

console.log(asObject.variables);
console.log(asObject.colors);

// or get an array [{}, {}]
const asArray = exporter(options).getArray();

console.log(asArray)

Usage

Usage: sass-export [inputFiles] [options]

OptionsTypeDescription
-o, --outputStringFile path where to save the JSON exported.
-a, --arrayBooleanIf it is present, it will output an array file instead of a object structured.
-d, --dependenciesString[]List of dependencies separated by comma, where Sass will try to find the @imports that your inputFiles need to work. Example: "libs/, config/, variables/".
-h, --helpBooleanShows up this help screen.

Other utilities based on this tool

Contributing

Please feel free to submit pull requests or open issues to improve this tool. Also keep checking issues section and grab some items to help!

Check our Contributing page for more information.

License


MIT

Supporting

This is an open source project and completely free to use.

However, the amount of effort needed to maintain and develop new features and products within the Plentycode ecosystem is not sustainable without proper financial backing. If you have the capability, please consider donating using the link below:

Donate via Patreon

Keywords

FAQs

Package last updated on 24 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc