{"id":16711543,"url":"https://github.com/agu-z/sass3js","last_synced_at":"2025-04-10T05:41:08.383Z","repository":{"id":42209662,"uuid":"182882943","full_name":"agu-z/sass3js","owner":"agu-z","description":"Convert SASS variables to JS or TS","archived":false,"fork":false,"pushed_at":"2022-04-10T09:03:11.000Z","size":452,"stargazers_count":7,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T21:30:02.028Z","etag":null,"topics":["convert","flowtype","import","javscript","sass","scss","typescript","variables"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agu-z.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-22T23:24:54.000Z","updated_at":"2025-02-28T10:07:41.000Z","dependencies_parsed_at":"2022-08-12T09:41:20.868Z","dependency_job_id":null,"html_url":"https://github.com/agu-z/sass3js","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agu-z%2Fsass3js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agu-z%2Fsass3js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agu-z%2Fsass3js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agu-z%2Fsass3js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agu-z","download_url":"https://codeload.github.com/agu-z/sass3js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166190,"owners_count":21058475,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["convert","flowtype","import","javscript","sass","scss","typescript","variables"],"created_at":"2024-10-12T20:12:23.250Z","updated_at":"2025-04-10T05:41:08.343Z","avatar_url":"https://github.com/agu-z.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sass3js\n\n[![npm version](https://img.shields.io/npm/v/sass3js.svg)](https://www.npmjs.com/package/sass3js) [![GitHub license](https://img.shields.io/badge/license-MIT-lightgrey.svg?maxAge=2592000)](LICENSE)\n\nConvert SASS \\* variables to JavaScript (flow supported), JSON, and TypeScript.\n\nIt takes this:\n\n```scss\n$red: #ff0001;\n$dark-red: darken($red, 20%);\n$spacing-1: 5px;\n$spacing-2: $spacing-1 * 2;\n```\n\nand outputs this:\n\n```ts\nexport default {\n  red: \"#ff0001\",\n  darkRed: \"#990001\",\n  spacing1: \"5px\",\n  spacing2: \"10px\",\n};\n```\n\nso you can do stuff like this:\n\n```jsx\nimport variables from \"styles/variables\";\n\nfunction Logo() {\n  return \u003cIcon src={logo} fill={variables.darkRed} /\u003e;\n}\n```\n\n\\* [Only SCSS syntax is supported at the moment](https://github.com/aguzubiaga/sass3js/issues/2).\n\n## Getting started\n\n### Globally\n\nYou can install `sass3js` globally with npm:\n\n```shell\n$ npm install -g sass3js sass\n```\n\nand use it like this:\n\n```shell\n$ sass3js variables.scss variables.js\n```\n\n### In your project\n\nYou can also add `sass3js` as a dev dependency to your own module:\n\n```shell\n$ npm i -D sass3js\n```\n\nOptionally, you can add a script to your `package.json` file. Example:\n\n```json\n  \"scripts\": {\n    \"update-vars\": \"sass3js -f ts styles/variables.scss styles/variables.ts\"\n  }\n```\n\n\u003e Note: sass3js requires you to have [sass](https://www.npmjs.com/package/sass) installed\n\n## CLI\n\nThe CLI can take a source and a destination file:\n\n```shell\n$ sass3js source.scss destination.js\n```\n\nIf those aren't provided, stdin and stdout are used instead:\n\n```shell\n$ cat source.scss | sass3js \u003e destination.js\n```\n\n### Options\n\n#### `-f, --format \u003cformat\u003e`\n\nOutput format. Takes: `js`, `json`, `ts`, or `flow`. Default: `js`.\n\n#### `-t, --tab \u003ctab\u003e`\n\nNumber of spaces or string to use for indentation. Default: `2`.\n\nUsing 4 spaces:\n\n```shell\n$ sass3js -t 4 source.scss\n```\n\nUsing tabs instead of spaces:\n\n```shell\n$ sass3js -t $'\\t' source.scss\n```\n\n## API\n\nThe API is pretty small. It contains only two functions: [getVariables](lib/variables.js#L6) and [format](lib/format.js).\n\nTypes:\n\n```ts\ntype Variables = { [variable: string]: string };\ntype Format = \"js\" | \"json\" | \"ts\" | \"flow\";\n```\n\n#### `getVariables(contents: string): Variables`\n\nThis function takes the contents of your SCSS file and returns an object where the keys are the variable names and the values are the rendered (final) values.\n\n#### `format(variables: Variables, format: Format, tab: number | string): string`\n\nThe `format` function serializes the variables and generates the output file. It takes the variables object returned by `getVariables`, a format option, and tab argument which can either be the number of spaces or the character to use (e.g. tab).\n\n## The Name\n\nI know it's silly, but [sass2js](https://www.npmjs.com/package/sass2js) is already taken 😛\n\n## Motivation\n\n### sass \u003e node-sass\n\nThere are already a number of npm packages that do something similar to this one. However, most of them use [node-sass](https://www.npmjs.com/package/node-sass) instead of [sass](https://www.npmjs.com/package/sass). The latter is the official implementation and tools like [parcel](https://parceljs.org) recommend using it over the former. I didn't want to have both in my project so I made this.\n\n### Type safety\n\nIn addition, there are some webpack loaders that let you import your SASS variables from JS. The problem with those is that even if you use TypeScript or Flow, there's no way (that I'm aware of) for the compiler to check the type of your variables object.\n\n`sass3js` creates an actual `.js`/`.ts` file that you can import like you would any other module. This allows your type checker to infer the types of the variables object and alert you of typos and other type errors at compile time.\n\n## Inspiration\n\n1. https://github.com/nordnet/sass-variable-loader\n2. https://github.com/hankmccoy/sass-to-js-var-loader\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagu-z%2Fsass3js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagu-z%2Fsass3js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagu-z%2Fsass3js/lists"}