
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
sass-export
Advanced tools
Exports Sass files to Json format, able to manage sections with annotations in comments.
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.
Install it from NPM
npm install -g sass-export
Ready to export:
sass-export scss/config/*.scss -o exported-sass-array.json -a
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" }
]
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" }
]
}
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;
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)"
}
}
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 syntax:
import { exporter } from 'sass-export';
Require syntax:
const exporter = require('sass-export').exporter;
const exporterBuffer = require('sass-export').buffer;
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: sass-export [inputFiles] [options]
Options | Type | Description |
---|---|---|
-o, --output | String | File path where to save the JSON exported. |
-a, --array | Boolean | If it is present, it will output an array file instead of a object structured. |
-d, --dependencies | String[] | 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, --help | Boolean | Shows up this help screen. |
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
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:
FAQs
Exports Sass files to Json format, able to manage sections with annotations in comments.
The npm package sass-export receives a total of 10,020 weekly downloads. As such, sass-export popularity was classified as popular.
We found that sass-export demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.