{"id":16349510,"url":"https://github.com/jednano/postcss-nested-vars","last_synced_at":"2025-07-02T17:05:33.068Z","repository":{"id":57328290,"uuid":"42415858","full_name":"jednano/postcss-nested-vars","owner":"jednano","description":"PostCSS plugin for nested Sass-like variables.","archived":false,"fork":false,"pushed_at":"2017-11-02T19:13:54.000Z","size":37,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-17T19:55:37.643Z","etag":null,"topics":["nested","postcss","postcss-plugin","sass","variables","vars"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/jednano.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-09-13T22:46:47.000Z","updated_at":"2024-11-16T07:47:31.000Z","dependencies_parsed_at":"2022-09-18T17:00:59.046Z","dependency_job_id":null,"html_url":"https://github.com/jednano/postcss-nested-vars","commit_stats":null,"previous_names":["jedmao/postcss-nested-vars"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jednano/postcss-nested-vars","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fpostcss-nested-vars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fpostcss-nested-vars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fpostcss-nested-vars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fpostcss-nested-vars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jednano","download_url":"https://codeload.github.com/jednano/postcss-nested-vars/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fpostcss-nested-vars/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263182163,"owners_count":23426628,"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":["nested","postcss","postcss-plugin","sass","variables","vars"],"created_at":"2024-10-11T01:00:06.652Z","updated_at":"2025-07-02T17:05:33.046Z","avatar_url":"https://github.com/jednano.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-nested-vars\n\n\u003cimg align=\"right\" width=\"135\" height=\"95\"\n\ttitle=\"Philosopher’s stone, logo of PostCSS\"\n\tsrc=\"http://postcss.github.io/postcss/logo-leftp.png\"\u003e\n\n[![NPM version](http://img.shields.io/npm/v/postcss-nested-vars.svg?style=flat)](https://www.npmjs.org/package/postcss-nested-vars)\n[![npm license](http://img.shields.io/npm/l/postcss-nested-vars.svg?style=flat-square)](https://www.npmjs.org/package/postcss-nested-vars)\n[![Travis Build Status](https://img.shields.io/travis/jedmao/postcss-nested-vars.svg)](https://travis-ci.org/jedmao/postcss-nested-vars)\n[![codecov](https://codecov.io/gh/jedmao/postcss-nested-vars/branch/master/graph/badge.svg)](https://codecov.io/gh/jedmao/postcss-nested-vars)\n[![Dependency Status](https://gemnasium.com/badges/github.com/jedmao/postcss-nested-vars.svg)](https://gemnasium.com/github.com/jedmao/postcss-nested-vars)\n\n[![npm](https://nodei.co/npm/postcss-nested-vars.svg?downloads=true)](https://nodei.co/npm/postcss-nested-vars/)\n\n[PostCSS](https://github.com/postcss/postcss) plugin for nested [Sass-like](http://sass-lang.com/guide#topic-2) variables.\n\n## Introduction\n\nInstead of assuming all variables are global, this plugin assumes the variable for which you are looking can be found in the current nested container context or in one of its ancestors (i.e., root, rule or at-rule).\n\n```scss\n$color: red;\na {\n\tcolor: $color;\n\t$color: white;\n\tcolor: $color;\n\tb {\n\t\tcolor: $color;\n\t\t$color: blue;\n\t\tcolor: $color;\n\t}\n\tcolor: $color;\n}\n```\n\nTranspiles into:\n\n```scss\na {\n\tcolor: red;\n\tcolor: white;\n\tb {\n\t\tcolor: white;\n\t\tcolor: blue;\n\t}\n\tcolor: white;\n}\n```\n\nYou can also target rule selectors, at-rule params and declaration properties with a special `$(varName)` syntax, same as [`postcss-simple-vars`](https://github.com/postcss/postcss-simple-vars):\n\n```css\n$bar: BAR;\n$(bar) {}\n@media foo$(bar) {\n\tfoo-$(bar)-baz: qux;\n}\n```\n\nTranspiles into:\n\n```css\nBAR {}\n@media fooBAR {\n\tfoo-BAR-baz: qux;\n}\n```\n\n### Related Projects\n\n- [`postcss-simple-vars`](https://github.com/postcss/postcss-simple-vars)\n- [`postcss-advanced-vars`](https://github.com/jonathantneal/postcss-advanced-variables)\n\n## Installation\n\n```\n$ npm install postcss-nested-vars\n```\n\n## Usage\n\n### JavaScript\n\n```js\npostcss([ require('postcss-nested-vars')(/* options */) ]);\n```\n\n### TypeScript\n\n```ts\nimport * as postcssNestedVars from 'postcss-nested-vars';\n\npostcss([ postcssNestedVars(/* options */) ]);\n```\n\n## Options\n\n### globals\n\nType: `Object`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: `{}`\n\nGlobal variables that can be referenced from any context.\n\n### logLevel\n\nType: `string: \u003cerror|warn|silent\u003e`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: `error`\n\nIf a variable cannot be resolved, this specifies how to handle it. `warn` and `silent` modes will preserve the original values (e.g., `$foo` will remain `$foo`).\n\n## Testing\n\nRun the following command:\n\n```\n$ npm test\n```\n\nThis will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.\n\n### Watching\n\nFor much faster development cycles, run the following commands in 2 separate processes:\n\n```\n$ npm run build:watch\n```\n\nCompiles TypeScript source into the `./dist` folder and watches for changes.\n\n```\n$ npm run watch\n```\n\nRuns the tests in the `./dist` folder and watches for changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjednano%2Fpostcss-nested-vars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjednano%2Fpostcss-nested-vars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjednano%2Fpostcss-nested-vars/lists"}