Extract Sass variables as structured JSON for use in JavaScript, enabling dynamic styling beyond CSS.
sass-extract is a Node.js library that compiles Sass files and extracts their computed variables into a structured JSON object. It allows developers to maintain style definitions solely in Sass while accessing them in JavaScript for dynamic content like visualizations or canvas rendering. The tool uses native libsass features to ensure extracted values match the computed CSS values, even with complex expressions and imports.
Frontend or full-stack developers who need to use Sass variables in JavaScript for non-CSS styling, such as canvas rendering, data visualizations, or dynamic SVG generation. It is also suitable for teams wanting to keep style variables in Sass files without duplicating them in JSON configurations.
Developers choose sass-extract because it eliminates the need for separate JSON style files by extracting variables directly from Sass, ensuring consistency with CSS output. Its full Sass compatibility, plugin system, and API similarity to node-sass provide a seamless integration into existing build processes.
Extract structured variables from sass files
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Extracts all Sass data types with type-specific structures, including nested maps and lists, ensuring computed values match CSS output even with imports and overrides, as detailed in the Data Types section.
Offers a plugin system with bundled plugins like 'serialize' and 'filter', allowing customization of output format and content without modifying core code, enabling tailored workflows for different use cases.
Mirrors the node-sass API with both synchronous and asynchronous methods (renderSync/extractSync), making integration seamless for developers already using node-sass in their build processes.
Accurately extracts global variables across files, managing overrides and imports to provide final computed values, which is essential for maintaining consistency in complex style systems.
The README explicitly states that extraction is limited to global variables, ignoring local variables within selectors, which restricts use cases for component-scoped styles in modern CSS architectures.
Relies on node-sass, which is deprecated and may not support newer Sass features or Node.js versions, posing long-term maintenance risks and compatibility issues.
Requires compiling Sass files twice if both CSS and variables are needed, adding build time compared to tools that extract variables during a single compilation pass.