Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
scss-to-json
Advanced tools
A package to require SCSS variables in JSON format.
This package allows you to use your SCSS variables in your JS code. Specifically, it takes a SCSS variable file (example below) and will parse, run Sass functions, and convert to JSON format. This package is a function that will make this conversion for you in memory. If you want to output JSON to your file system, you should use the associated grunt-scss-to-json package.
Install via npm:
npm install scss-to-json
This package requires a SCSS variables file that is isolated by itself with no other SCSS code. If you are working in a front-end framework or library it is likely that your SCSS code is already set up in this manner. For example, this package will work well with a variables.scss file that looks something like this:
// Font Sizes
$font-size: 14px;
$font-size-large: $font-size * 1.1;
// Colors
$text-color: #666;
$text-color-light: lighten($text-color, 15%);
$border-color: #123 !global; // use for all borders
When run on that code above, scss-to-json will output the below JSON:
{
'$font-size': '14px',
'$font-size-large': '15.4px',
'$text-color': '#666',
'$text-color-light': '#8c8c8c',
'$border-color': '#123'
}
Note that scss-to-json will filter out flags (marked with an !) and comments and evaluate Sass functions before it produces the JSON object.
In your CommonJS JavaScript file, requiring this package will return a function that takes a file path of your SCSS variables file. It also takes an optional options object, which is detailed in the next section.
var scssToJson = require('scss-to-json');
var path = require('path');
var filePath = path.resolve(__dirname, 'colors.scss');
var colors = scssToJson(filePath);
The second argument of the returned function is an optional options object. Each option is detailed below:
SCSS variables files sometimes rely on other SCSS variables defined earlier in your import tree. In order to keep these files isolated (and still produce JSON), you can specify an array of files that your given file depends on. For example, below we are trying to convert our color mapping file, but it depends on the actual color definitions which are found in a different file.
var scssToJson = require('scss-to-json');
var path = require('path');
var filePath = path.resolve(__dirname, 'color-mapping.scss');
var dependencyPath = path.resolve(__dirname, 'colors.scss');
var colors = scssToJson(filePath, {
dependencies: [{path: dependencyPath}]
});
SCSS variable files are able to provide local and global scope with the following method:
%scoped {
$font-size: 14px;
$font-size-large: $font-size * 1.1 !global;
}
html {
@extend %scoped;
}
This will keep $font-size
scoped locally inside that block, while allowing it to be used to derive global variables marked with the !global
flag. These variables will be available throughout your SCSS import tree.
If you use this method in your SCSS variables file, you can provide an option to scss-to-json to output only the global variables to JSON. The option takes the name of the scoping placeholder as a string.
var scssToJson = require('scss-to-json');
var path = require('path');
var filePath = path.resolve(__dirname, 'variables.scss');
var colors = scssToJson(filePath, {
scope: '%scoped'
});
You can also use the CLI scss-to-json <file>
.
Pull requests are welcome. If you add functionality, then please add unit tests to cover it. Continuous Integration is handled by Travis.
MIT © Ryan Bahniuk
Version 2.0.0
Upgrading node-sass version to ^4.0.0.
FAQs
A utility for converting SCSS variables files to JSON
The npm package scss-to-json receives a total of 778 weekly downloads. As such, scss-to-json popularity was classified as not popular.
We found that scss-to-json demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.