{"id":15391892,"url":"https://github.com/scrum/postcss-at-rules-variables","last_synced_at":"2026-02-17T19:02:53.711Z","repository":{"id":1723975,"uuid":"43893223","full_name":"Scrum/postcss-at-rules-variables","owner":"Scrum","description":"PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else and more...","archived":false,"fork":false,"pushed_at":"2023-03-04T02:30:03.000Z","size":2429,"stargazers_count":60,"open_issues_count":8,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-11T07:09:44.530Z","etag":null,"topics":["at-rules","css","plugins","postcss","postcss-plugins","property","rules"],"latest_commit_sha":null,"homepage":"","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/Scrum.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":".github/funding.yml","license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://paypal.me/scrumpay"]}},"created_at":"2015-10-08T14:14:53.000Z","updated_at":"2024-08-11T10:20:23.000Z","dependencies_parsed_at":"2023-07-05T18:17:40.406Z","dependency_job_id":null,"html_url":"https://github.com/Scrum/postcss-at-rules-variables","commit_stats":{"total_commits":338,"total_committers":6,"mean_commits":"56.333333333333336","dds":0.742603550295858,"last_synced_commit":"66fe84c22c8d045079bb953567b437f2f559d778"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fpostcss-at-rules-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fpostcss-at-rules-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fpostcss-at-rules-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fpostcss-at-rules-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Scrum","download_url":"https://codeload.github.com/Scrum/postcss-at-rules-variables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253528970,"owners_count":21922636,"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":["at-rules","css","plugins","postcss","postcss-plugins","property","rules"],"created_at":"2024-10-01T15:13:25.689Z","updated_at":"2026-02-17T19:02:53.679Z","avatar_url":"https://github.com/Scrum.png","language":"JavaScript","readme":"# postcss-at-rules-variables \u003ca href=\"https://github.com/postcss/postcss\"\u003e\u003cimg align=\"left\" height=\"49\" title=\"PostCSS\" src=\"http://postcss.github.io/postcss/logo.svg\"\u003e\u003c/a\u003e\n\u003e [PostCSS](https://github.com/postcss/postcss) plugin to transform [W3C CSS Custom Properties](http://www.w3.org/TR/css-variables/) for at-rule’s parameters.\n\n[![Travis Build Status](https://img.shields.io/travis/Scrum/postcss-at-rules-variables/master.svg?style=flat-square\u0026label=unix)](https://travis-ci.org/Scrum/postcss-at-rules-variables)[![AppVeyor Build Status](https://img.shields.io/appveyor/ci/GitScrum/postcss-at-rules-variables/master.svg?style=flat-square\u0026label=windows)](https://ci.appveyor.com/project/GitScrum/postcss-at-rules-variables)[![node](https://img.shields.io/node/v/postcss-at-rules-variables.svg?style=flat-square)]()[![npm version](https://img.shields.io/npm/v/postcss-at-rules-variables.svg?style=flat-square)](https://www.npmjs.com/package/postcss-at-rules-variables)[![Dependency Status](https://david-dm.org/Scrum/postcss-at-rules-variables.svg?style=flat-square)](https://david-dm.org/Scrum/postcss-at-rules-variables)[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/xojs/xo)[![Coveralls status](https://img.shields.io/coveralls/Scrum/postcss-at-rules-variables.svg?style=flat-square)](https://coveralls.io/r/Scrum/postcss-at-rules-variables)\n\n[![npm downloads](https://img.shields.io/npm/dm/postcss-at-rules-variables.svg?style=flat-square)](https://www.npmjs.com/package/postcss-at-rules-variables)[![npm](https://img.shields.io/npm/dt/postcss-at-rules-variables.svg?style=flat-square)](https://www.npmjs.com/package/postcss-at-rules-variables)[![Package Quality](http://npm.packagequality.com/shield/postcss-at-rules-variables.svg?style=flat-square)](http://packagequality.com/#?package=postcss-at-rules-variables)\n\n\n## Why?\nAdds the ability to use a custom property in the options, at-rules.  \n*Used in conjunction with the plugin [postcss-each], [postcss-conditionals], [postcss-for] and more at-rules plugins.*  \n\n## Install\n\n```bash\n$ npm install --save-dev postcss postcss-at-rules-variables\n```\n\n\u003e **Note:** This project is compatible with node v10+\n\n## Usage\n\n```js\n// Dependencies\nvar fs = require('fs');\nvar postcss = require('postcss');\nvar colorFunction = require('postcss-color-function');\nvar atImport = require('postcss-import');\nvar atEach = require('postcss-each');\nvar atVariables = require('postcss-at-rules-variables');\nvar atIf = require('postcss-conditionals');\nvar atFor = require('postcss-for');\nvar cssVariables = require('postcss-css-variables');\nvar nested = require('postcss-nested');\n\n// CSS to be processed\nvar css = fs.readFileSync('css/input.css', 'utf8');\n\n// Process CSS\nvar output = postcss()\n  .use(atVariables({ /* atRules: ['media'] */ }))\n  .use(colorFunction())\n  .use(atEach())\n  .use(atImport({\n    plugins: [\n      require('postcss-at-rules-variables')({ /* options */ }),\n      require('postcss-import')\n    ]\n  }))\n  .use(atFor())\n  .use(atIf())\n  .use(cssVariables())\n  .use(nested())\n  .process(css, {\n    from: 'css/input.css'\n  })\n  .css;\n\nconsole.log(output);\n```\n\u003e *Use postcss-at-rules-variables before you at-rules plugins*\n\n# Example\n\n```css\n/* input.css */\n:root {\n    --array: foo, bar, baz;\n    --from: 1;\n    --to: 3;\n    --icon-exclude: 2;\n    --color-danger: red;\n    --nested-variable: color(var(--color-danger) a(90%)) ;\n}\n\n@each $val in var(--array) {\n    @import \"$val.css\";\n}\n```\n\n```css\n/* foo.css */\nhtml {\n    background-color: var(--color-danger);\n    color: var(--nested-variable);\n}\n```\n\n```css\n/* bar.css */\n.some-class {\n    color: #fff;\n\n    @for $val from var(--from) to var(--to) {\n        @if $val != var(--icon-exclude) {\n            .icon-$val {\n                background-position: 0 $(val)px;\n            }\n        }\n    }\n}\n```\n\n```css\n/* baz.css */\nh1 {\n    font-size: 24px;\n}\n\n@import \"biz.css\";\n```\n\n```css\n/* biz.css */\nh2 {\n    color: olive;\n}\n```\n\n```css\n/* Output example */\nhtml {\n    background-color: red;\n    color: rgba(255, 0, 0, 0.9);\n}\n\n.some-class {\n    color: #fff;\n}\n\n.some-class .icon-1 {\n    background-position: 0 1px;\n}\n\n.some-class .icon-3 {\n    background-position: 0 3px;\n}\n\nh1 {\n    font-size: 24px;\n}\n\nh2 {\n    color: olive;\n}\n\n```\n\n## Options\n\n#### `atRules`\n\nType: `Array`  \nDefault: `['for', 'if', 'else', 'each', 'mixin', 'custom-media']`  \nDescription: *The array used in all at-rules in your project*\n\n#### `variables`\n\nType: `Object`  \nDefault: `{}`  \nDescription: *Allows you to pass an object of variables for `:root`. These definitions will override any that exist in the CSS*\n\n#### `declarationByWalk`\n\nType: `boolean`  \nDefault: `false`  \nDescription: *Searches for root declarations by traversing all declarations before interpolating them.*\n\n\u003e :warning: Attention, this approach is slower and carries the risk of overriding existing variables\n\n[postcss-conditionals]:     https://github.com/andyjansson/postcss-conditionals\n[postcss-each]:             https://github.com/outpunk/postcss-each\n[postcss-for]:              https://github.com/antyakushev/postcss-for\n[testen repo]:              https://github.com/egoist/testen\n","funding_links":["https://paypal.me/scrumpay"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscrum%2Fpostcss-at-rules-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscrum%2Fpostcss-at-rules-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscrum%2Fpostcss-at-rules-variables/lists"}