{"id":13452139,"url":"https://github.com/michaeltaranto/less-vars-to-js","last_synced_at":"2026-01-26T17:41:08.439Z","repository":{"id":60775075,"uuid":"57207597","full_name":"michaeltaranto/less-vars-to-js","owner":"michaeltaranto","description":"Read LESS variables from the contents of a file and returning them as a javascript object.","archived":false,"fork":false,"pushed_at":"2020-04-01T09:38:15.000Z","size":17,"stargazers_count":135,"open_issues_count":9,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-17T20:03:39.395Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michaeltaranto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-27T11:18:59.000Z","updated_at":"2024-02-25T09:24:04.000Z","dependencies_parsed_at":"2022-10-04T16:16:42.049Z","dependency_job_id":null,"html_url":"https://github.com/michaeltaranto/less-vars-to-js","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeltaranto%2Fless-vars-to-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeltaranto%2Fless-vars-to-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeltaranto%2Fless-vars-to-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeltaranto%2Fless-vars-to-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaeltaranto","download_url":"https://codeload.github.com/michaeltaranto/less-vars-to-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221900726,"owners_count":16898986,"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":[],"created_at":"2024-07-31T07:01:14.355Z","updated_at":"2026-01-26T17:41:03.405Z","avatar_url":"https://github.com/michaeltaranto.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Build Status](https://img.shields.io/travis/michaeltaranto/less-vars-to-js/master.svg?style=flat-square)](https://travis-ci.org/michaeltaranto/less-vars-to-js)\n[![Coverage Status](https://img.shields.io/coveralls/michaeltaranto/less-vars-to-js.svg?style=flat-square)](https://coveralls.io/github/michaeltaranto/less-vars-to-js?branch=master)\n[![npm](https://img.shields.io/npm/v/less-vars-to-js.svg?style=flat-square)](https://www.npmjs.com/package/less-vars-to-js) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)\n# less-vars-to-js\nRead [LESS](http://lesscss.org/) variables from the contents of a file and return them as a javascript object.\n```js\n$ npm install --save less-vars-to-js\n```\n\n### Why?\nI wrote this to use in our living style guide where we document our colour palette, typography, grid, components etc. This allows variables to be visualised in the style guide without having to read through the code (useful for non-technical team members).\n\n### What does it do?\nTakes in the contents of a less file as a `string` and returns an `object` containing all the variables it found. It is deliberately naive as it is not intending to be a less parser. Basically it reads anything starting with an `@`, so it will ignore comments, rule definitions, import statements etc.\n\nExample :\n```less\n@import (reference) \"theme\";\n\n// Colour palette\n@blue: #0d3880;\n@pink: #e60278;\n\n// Elements\n@background: @gray;\n@favourite: blanchedalmond;\n\n// Grid\n@row-height: 9;\n\n.element {\n  @foreground: black;\n  color: @foreground;\n}\n```\nExample output:\n```json\n{\n  \"@blue\": \"#0d3880\",\n  \"@pink\": \"#e60278\",\n  \"@background\": \"@gray\",\n  \"@favourite\": \"blanchedalmond\",\n  \"@row-height\": 9,\n  \"@foreground\": \"black\"\n}\n```\n**Note:** while it does return variables it finds within rules, it is recommended to use this on files containing only variables, as it's not a parser and is designed to extract design principles for style guides.\n\n### Options\n| Option            | Effect                                                                                                       |\n| ----------------- | ------------------------------------------------------------------------------------------------------------ |\n| resolveVariables  | Resolves variables when they are defined in the same file.                                                   |\n| dictionary        | When `resolveVariables` is true, passes an object to use when the value cannot be resolved in the same file. |\n| stripPrefix       | Removes the `@` or `$` in the returned object keys.                                                          |\n\n### Usage\n```js\nimport lessToJs from 'less-vars-to-js';\nimport fs from 'fs';\n\n// Read the less file in as string\nconst paletteLess = fs.readFileSync('palette.less', 'utf8');\n\n// Pass in file contents\nconst palette = lessToJs(paletteLess, {resolveVariables: true, stripPrefix: true});\n\n// Use the variables (example React component)\nexport default class Palette extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n      {\n        Object.keys(palette)\n          .forEach(colour =\u003e (\n            \u003cdiv style={{ backgroundColor: palette[colour] }}\u003e\n              \u003cp\u003e{ colour }\u003c/p\u003e\n              \u003cp\u003e{ palette[colour] }\u003c/p\u003e\n            \u003c/div\u003e\n          ))\n      }\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### License\n\n[MIT](http://michaeltaranto.mit-license.org)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaeltaranto%2Fless-vars-to-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaeltaranto%2Fless-vars-to-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaeltaranto%2Fless-vars-to-js/lists"}