Name: postcss-mixins
Owner: PostCSS
Description: PostCSS plugin for mixins
Created: 2015-02-01 04:56:06.0
Updated: 2018-05-19 05:28:52.0
Pushed: 2018-03-20 17:04:08.0
Homepage: null
Size: 285
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
<img align=“right” width=“135” height=“95”
title="Philosopher?s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo-leftp.svg">
PostCSS plugin for mixins.
Note, that you must set this plugin before postcss-simple-vars and postcss-nested.
ine-mixin icon $network, $color: blue {
.icon.is-$(network) {
color: $color;
@mixin-content;
}
.icon.is-$(network):hover {
color: white;
background: $color;
}
in icon twitter {
background: url(twt.png);
in icon youtube, red {
background: url(youtube.png);
ss
n.is-twitter {
color: blue;
background: url(twt.png);
n.is-twitter:hover {
color: white;
background: blue;
n.is-youtube {
color: red;
background: url(youtube.png);
n.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.
css([ require('postcss-mixins') ])
See PostCSS docs for examples for your environment.
Simple template defined directly in CSS to prevent repeating yourself.
See postcss-simple-vars docs for arguments syntax.
You can use it with postcss-nested plugin:
ine-mixin icon $name {
padding-left: 16px;
&::after {
content: "";
background-url: url(/icons/$(name).png);
}
rch {
@mixin icon search;
Unlike Sass, PostCSS has no if
or while
statements. If you need some
complicated logic, you should use function mixin.
This type of mixin gives you full power of JavaScript.
You can define this mixins in mixins
option.
This type is ideal for CSS hacks or business logic.
Also you should use function mixin if you need to change property names in mixin, because postcss-simple-vars doesn?t support variables in properties yet.
First argument will be @mixin
node, that called this mixin.
You can insert your declarations or rule before or after this node.
Other arguments will be taken from at-rule parameters.
See PostCSS API about nodes API.
ire('postcss-mixins')({
mixins: {
icons: function (mixin, dir) {
fs.readdirSync('/images/' + dir).forEach(function (file) {
var icon = file.replace(/\.svg$/, '');
var rule = postcss.rule('.icon.icon-' + icon);
rule.append({
prop: 'background',
value: 'url(' + dir + '/' + file + ')'
});
mixin.replaceWith(rule);
});
}
}
ss
in icons signin;
ss
n.icon-back { background: url(signin/back.svg) }
n.icon-secret { background: url(signin/secret.svg) }
You can also return an object if you don?t want to create each node manually:
ire('postcss-mixins')({
mixins: {
image: function (mixin, path) {
return {
'&': {
background: 'url(' + path + ')'
},
'@media (min-resolution: 120dpi)': {
'&': {
background: 'url(' + path + '@2x)'
}
}
}
}
}
Mixin body will be in mixin.nodes
:
postcss = require('postcss');
ire('postcss-mixins')({
mixins: {
hover: function (mixin) {
let rule = postcss.rule({ selector: '&:hover, &.hover' });
rule.append(mixin.nodes);
mixin.replaceWith(rule);
}
}
Or you can use object instead of function:
ire('postcss-mixins')({
mixins: {
clearfix: {
'&::after': {
content: '""',
display: 'table',
clear: 'both'
}
}
}
@mixin-context
at-rule will be replaced with mixin @mixin
children.
For exampel, CSS mxins:
ine-mixin isIE {
.isIE & {
@mixin-content;
}
or JS mixins:
ire('postcss-mixins')({
mixins: {
isIe: function () {
'@mixin-content': {},
}
}
could be used like this:
{
color: blue;
@mixin isIE {
color: red;
}
utput
{ color: blue; }
E .foo { color: red; }
If you need to use Sass and PostCSS mixins together
(for example, while migration), you could use @add-mixin
,
instead of @mixin
. Just put PostCSS after Sass.
egacy SCSS
in old {
?
lude old;
ew code
ine-mixin new {
?
-mixin new;
Call plugin function to set options:
css([ require('postcss-mixins')({ mixins: { ? } }) ])
mixins
Type: Object
Object of function mixins.
mixinsDir
Type: string|string[]
Autoload all mixins from one or more dirs. Mixin name will be taken from file name.
ulpfile.js
ire('postcss-mixins')({
mixinsDir: path.join(__dirname, 'mixins')
ixins/clearfix.js
le.exports = {
'&::after': {
content: '""',
display: 'table',
clear: 'both'
}
ixins/size.pcss
ine-mixin size $size {
width: $size;
height: $size;
ixins/circle.sss
ine-mixin circle $size
rder-radius: 50%
dth: $size
ight: $size
mixinsFiles
Type: string|string[]
Similar to mixinsDir
; except, you can provide
glob syntax to target or not target
specific files.
ire('postcss-mixins')({
mixinsFiles: path.join(__dirname, 'mixins', '!(*.spec.js)')
silent
Remove unknown mixins and do not throw a error. Default is false
.