{"id":13484288,"url":"https://github.com/postcss/postcss-mixins","last_synced_at":"2025-05-15T02:07:26.446Z","repository":{"id":26680024,"uuid":"30136742","full_name":"postcss/postcss-mixins","owner":"postcss","description":"PostCSS plugin for mixins","archived":false,"fork":false,"pushed_at":"2024-09-30T23:17:38.000Z","size":1187,"stargazers_count":477,"open_issues_count":3,"forks_count":47,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-12T19:29:11.782Z","etag":null,"topics":[],"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/postcss.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"postcss","github":"ai"}},"created_at":"2015-02-01T04:56:06.000Z","updated_at":"2025-05-10T15:13:26.000Z","dependencies_parsed_at":"2024-01-13T18:25:11.111Z","dependency_job_id":"1a0e145e-82a5-47df-9c05-76afe1d650c6","html_url":"https://github.com/postcss/postcss-mixins","commit_stats":{"total_commits":291,"total_committers":35,"mean_commits":8.314285714285715,"dds":"0.18556701030927836","last_synced_commit":"b9d86af3d747f00bdd118f379afe4b95f889a833"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-mixins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-mixins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-mixins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-mixins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postcss","download_url":"https://codeload.github.com/postcss/postcss-mixins/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259383,"owners_count":22040820,"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-31T17:01:21.953Z","updated_at":"2025-05-15T02:07:26.425Z","avatar_url":"https://github.com/postcss.png","language":"JavaScript","readme":"# PostCSS Mixins\n\n\u003cimg align=\"right\" width=\"135\" height=\"95\"\n     title=\"Philosopher’s stone, logo of PostCSS\"\n     src=\"https://postcss.org/logo-leftp.svg\"\u003e\n\n[PostCSS] plugin for mixins.\n\nNote, that you must set this plugin before [postcss-simple-vars]\nand [postcss-nested].\n\n```css\n@define-mixin icon $network, $color: blue {\n    .icon.is-$(network) {\n        color: $color;\n        @mixin-content;\n    }\n    .icon.is-$(network):hover {\n        color: white;\n        background: $color;\n    }\n}\n\n@mixin icon twitter {\n    background: url(twt.png);\n}\n@mixin icon youtube, red {\n    background: url(youtube.png);\n}\n```\n\n```css\n.icon.is-twitter {\n    color: blue;\n    background: url(twt.png);\n}\n.icon.is-twitter:hover {\n    color: white;\n    background: blue;\n}\n.icon.is-youtube {\n    color: red;\n    background: url(youtube.png);\n}\n.icon.is-youtube:hover {\n    color: white;\n    background: red;\n}\n```\n\n[postcss-utilities] collection is better for `clearfix` and other popular hacks.\nFor simple cases you can use [postcss-define-property].\n\n[postcss-define-property]: https://github.com/daleeidd/postcss-define-property\n[postcss-utilities]:       https://github.com/ismamz/postcss-utilities\n[postcss-simple-vars]:     https://github.com/postcss/postcss-simple-vars\n[postcss-nested]:          https://github.com/postcss/postcss-nested\n[PostCSS]:                 https://github.com/postcss/postcss\n\n\u003ca href=\"https://evilmartians.com/?utm_source=postcss-mixins\"\u003e\n  \u003cimg src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\"\n       alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\"\u003e\n\u003c/a\u003e\n\n\n## Usage\n\n**Step 1:** Install plugin:\n\n```sh\nnpm install --save-dev postcss postcss-mixins\n```\n\n**Step 2:** Check your project for existed PostCSS config: `postcss.config.js`\nin the project root, `\"postcss\"` section in `package.json`\nor `postcss` in bundle config.\n\nIf you do not use PostCSS, add it according to [official docs]\nand set this plugin in settings.\n\n**Step 3:** Add the plugin to plugins list:\n\n```diff\nmodule.exports = {\n  plugins: [\n+   require('postcss-mixins'),\n    require('autoprefixer')\n  ]\n}\n```\n\n\n### CSS Mixin\n\nSimple template defined directly in CSS to prevent repeating yourself.\n\nSee [postcss-simple-vars] docs for arguments syntax.\n\nYou can use it with [postcss-nested] plugin:\n\n```css\n@define-mixin icon $name {\n    padding-left: 16px;\n    \u0026::after {\n        content: \"\";\n        background: url(/icons/$(name).png);\n    }\n}\n\n.search {\n    @mixin icon search;\n}\n```\n\nUnlike Sass, PostCSS has no `if` or `while` statements. If you need some\ncomplicated logic, you should use function mixin.\n\n[postcss-nested]:      https://github.com/postcss/postcss-nested\n[postcss-simple-vars]: https://github.com/postcss/postcss-simple-vars\n\n\n### Function Mixin\n\nThis type of mixin gives you full power of JavaScript.\nYou can define this mixins in `mixins` option.\n\nThis type is ideal for CSS hacks or business logic.\n\nAlso, you should use function mixin if you need to change property names\nin mixin, because [postcss-simple-vars] doesn’t support variables\nin properties yet.\n\nFirst argument will be `@mixin` node, that called this mixin.\nYou can insert your declarations or rule before or after this node.\nOther arguments will be taken from at-rule parameters.\n\nSee [PostCSS API](https://postcss.org/api/) about nodes API.\n\n```js\nrequire('postcss-mixins')({\n    mixins: {\n        icons: function (mixin, dir) {\n            fs.readdirSync('/images/' + dir).forEach(function (file) {\n                var icon = file.replace(/\\.svg$/, '');\n                var rule = postcss.rule({ selector: '.icon.icon-' + icon });\n                rule.append({\n                    prop:  'background',\n                    value: 'url(' + dir + '/' + file + ')'\n                });\n                mixin.replaceWith(rule);\n            });\n        }\n    }\n});\n```\n\n```css\n@mixin icons signin;\n```\n\n```css\n.icon.icon-back { background: url(signin/back.svg) }\n.icon.icon-secret { background: url(signin/secret.svg) }\n```\n\nYou can also return an object if you don’t want to create each node manually:\n\n```js\nrequire('postcss-mixins')({\n    mixins: {\n        image: function (mixin, path, dpi) {\n            return {\n                '\u0026': {\n                    background: 'url(' + path + ')'\n                },\n                ['@media (min-resolution: '+ dpi +'dpi)']: {\n                    '\u0026': {\n                        background: 'url(' + path + '@2x)'\n                    }\n                }\n            }\n        }\n    }\n});\n```\n\nMixin body will be in `mixin.nodes`:\n\n```js\nvar postcss = require('postcss');\n\nrequire('postcss-mixins')({\n    mixins: {\n        hover: function (mixin) {\n            let rule = postcss.rule({ selector: '\u0026:hover, \u0026.hover' });\n            rule.append(mixin.nodes);\n            mixin.replaceWith(rule);\n        }\n    }\n});\n```\n\nOr you can use object instead of function:\n\n```js\nrequire('postcss-mixins')({\n    mixins: {\n        clearfix: {\n            '\u0026::after': {\n                content: '\"\"',\n                display: 'table',\n                clear: 'both'\n            }\n        }\n    }\n});\n```\n\n### Mixin Content\n\n`@mixin-content` at-rule will be replaced with mixin `@mixin` children.\nFor example, CSS mixins:\n\n```SCSS\n@define-mixin isIE {\n    .isIE \u0026 {\n        @mixin-content;\n    }\n}\n```\n\nor JS mixins:\n\n```js\nrequire('postcss-mixins')({\n    mixins: {\n        isIe: function () {\n            '@mixin-content': {},\n        }\n    }\n});\n```\n\ncould be used like this:\n\n```scss\n.foo {\n    color: blue;\n\n    @mixin isIE {\n        color: red;\n    }\n}\n\n// output\n.foo { color: blue; }\n.isIE .foo { color: red; }\n```\n\n### Mixin parameters with comma\n\nIn order to pass a comma-separated value as an argument to a mixin, you can use\nthe special `single-arg` keyword. For example:\n\n```css\n@define-mixin transition $properties, $duration {\n  transition-property: $properties;\n  transition-duration: $duration;\n}\n\n.foo {\n  @mixin transition single-arg(color, background-color), 0.5s;\n}\n```\n\n### Migration from Sass\n\nIf you need to use Sass and PostCSS mixins together\n(for example, while migration), you could use `@add-mixin`,\ninstead of `@mixin`. Just put PostCSS after Sass.\n\n```sass\n// Legacy SCSS\n@mixin old {\n    …\n}\n@include old;\n\n// New code\n@define-mixin new {\n    …\n}\n@add-mixin new;\n```\n\n## Options\n\nCall plugin function to set options:\n\n```js\npostcss([ require('postcss-mixins')({ mixins: { … } }) ])\n```\n\n### `mixins`\n\nType: `Object`\n\nObject of function mixins.\n\n### `mixinsDir`\n\nType: `string|string[]`\n\nAutoload all mixins from one or more dirs. Mixin name will be taken from file\nname.\n\n```js\n// gulpfile.js\n\nrequire('postcss-mixins')({\n    mixinsDir: path.join(__dirname, 'mixins')\n})\n\n// mixins/clearfix.js\n\nmodule.exports = {\n    '\u0026::after': {\n        content: '\"\"',\n        display: 'table',\n        clear: 'both'\n    }\n}\n\n// mixins/size.pcss\n\n@define-mixin size $size {\n    width: $size;\n    height: $size;\n}\n\n// mixins/circle.sss\n\n@define-mixin circle $size\n  border-radius: 50%\n  width: $size\n  height: $size\n```\n\n### `mixinsFiles`\n\nType: `string|string[]`\n\nSimilar to [`mixinsDir`](#mixinsdir); except, you can provide\n[tinyglobby](https://github.com/SuperchupuDev/tinyglobby) syntax\nto target or not target specific files.\n\n```js\nrequire('postcss-mixins')({\n    mixinsFiles: path.join(__dirname, 'mixins', '!(*.spec.js)')\n})\n```\n\n### `silent`\n\nRemove unknown mixins and do not throw a error. Default is `false`.\n","funding_links":["https://opencollective.com/postcss","https://github.com/sponsors/ai"],"categories":["JavaScript","CSS3"],"sub_categories":["PostCSS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-mixins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostcss%2Fpostcss-mixins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-mixins/lists"}