11.0.3 • Published 9 months ago

postcss-mixins v11.0.3

Weekly downloads
127,704
License
MIT
Repository
github
Last release
9 months ago

PostCSS Mixins

PostCSS plugin for mixins.

Note, that you must set this plugin before postcss-simple-vars and postcss-nested.

@define-mixin icon $network, $color: blue {
    .icon.is-$(network) {
        color: $color;
        @mixin-content;
    }
    .icon.is-$(network):hover {
        color: white;
        background: $color;
    }
}

@mixin icon twitter {
    background: url(twt.png);
}
@mixin icon youtube, red {
    background: url(youtube.png);
}
.icon.is-twitter {
    color: blue;
    background: url(twt.png);
}
.icon.is-twitter:hover {
    color: white;
    background: blue;
}
.icon.is-youtube {
    color: red;
    background: url(youtube.png);
}
.icon.is-youtube:hover {
    color: white;
    background: red;
}

postcss-utilities collection is better for clearfix and other popular hacks. For simple cases you can use postcss-define-property.

Docs

Read full docs here.

vue-steps-kgloballistings-test-components@rock-kit/ui-postcss-configgintonicpostcss-config-pack@dubb/mickeymfp-react-componentsbrowcomp@fundefund/funde_ck@temporg/ui-postcss-configtorch-cssvuepress-theme-tsed2@infinitebrahmanuniverse/nolb-postcss-m@native-elements/core@everything-registry/sub-chunk-2461@yme/postcss-preset@yme/postcss-preset-ymecherry-designcherry-postcsswdc-toolkitwpi-react-hmr-ssrworkflo-componentssparrow-packertestujsk_custom_ckeditor5visual-camv-custom-stepsv-svg-chain@doyakovlev/arui-scripts@dlghq/postcss-dialog@drewfle/config@drewfle/rollupper@drblmthw/testujsk_custom_ckeditor5@deflock/assettler-processor-modularcssbariliqiyi_game_wp_cliwi-layer-react-expressspaden-postcss-config@amazee/react-scripts@anyone-oslo/pages@blueking/lesscode-cli@buchanaf/postcss-dependencies@chriseagle/10up-toolkit@ckeditor/ckeditor5-dev-build-tools@ckeditor/ckeditor5-dev-utils@ckeditor/vite-plugin-ckeditor5@clark/ember-css-modules-config@charge/sdk@clevercanyon/dev-deps@10up/frontity-build-config@10up/scripts2create-task-runner-package10up-toolkit@cloudfour/gulp-tasks@boris-turner/claycli@braille/react-scripts-ts@delement/ui@dgrammatiko/joomla-tools@digest/postcss@davidwells/config-postcss@datawheel/canon-coreycssyahoivuex-cli-webpackvuepress-theme-tsedwebpages-packer-browser-vuewebpack-focuswebpack-digestwebpack-bundle-systemvdevzerionprokovanmail@samatech/postcss-basics@ferments/css@dubb/junior@edia/react-scripts-ts@gravityforms/gulp-tasks@harsha-jalan/ckeditor5-custom-build@fiizy/postcss@fpg-modules/fpg-ui-build@hoaitt/ckeditor5-build-classic-mention@helpfulhuman/postcss-preset@fleetbase/ember-ui@frontender-magazine/article-builder@frosti/config@fusuma/configs@gitterhq/styleguide@lneedy/postcss-salad@locktech/atomic-mixins@lskjs/build@lennyanders/s17r@instructure/ui-postcss-config@moxiworks/mds@moxy/postcss-preset@myorders/ember-ui@natewmaxx/react-scripts@namchey/linkpreview@nobitas/react-image-load@enercido/claycli@fabwcie/ckeditor5-preview@max-norin/postcss-project-init@material-svelte/postcss-plugin
11.0.2

9 months ago

11.0.3

9 months ago

11.0.0

10 months ago

11.0.1

10 months ago

10.0.1

1 year ago

10.0.0

1 year ago

9.0.4

3 years ago

9.0.3

3 years ago

9.0.2

3 years ago

9.0.1

4 years ago

9.0.0

4 years ago

8.1.0

4 years ago

8.0.0

4 years ago

7.0.3

4 years ago

7.0.2

5 years ago

7.0.1

5 years ago

7.0.0

5 years ago

6.2.3

6 years ago

6.2.2

6 years ago

6.2.1

7 years ago

6.2.0

8 years ago

6.1.1

8 years ago

6.1.0

8 years ago

6.0.1

8 years ago

6.0.0

8 years ago

5.4.1

9 years ago

5.4.0

9 years ago

5.3.0

9 years ago

5.2.0

9 years ago

5.1.0

9 years ago

5.0.1

9 years ago

5.0.0

9 years ago

4.0.2

9 years ago

4.0.1

9 years ago

4.0.0

9 years ago

3.0.2

10 years ago

3.0.1

10 years ago

3.0.0

10 years ago

2.1.1

10 years ago

2.1.0

10 years ago

2.0.0

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.4.0

10 years ago

0.3.0

10 years ago

0.2.0

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago