<commit_before># PostCSS Mixins [![Build Status](https://travis-ci.org/postcss/postcss-mixins.svg)](https://travis-ci.org/postcss/postcss-mixins)

<img align="right" width="95" height="95" src="http://postcss.github.io/postcss/logo.svg" title="Philosopher’s stone, logo of PostCSS">

[PostCSS] plugin for mixins.

```css
@define-mixin icon $network $color {
    .icon.is-$(network) {
        color: $color;
    }
    .icon.is-$(network):hover {
        color: white;
        background: $color;
    }
}

@mixin icon twitter blue;
@mixin icon youtube red;
```

```css
.icon.is-twitter {
    color: blue;
}
.icon.is-twitter:hover {
    color: white;
    background: blue;
}
.icon.is-youtube {
    color: red;
}
.icon.is-youtube:hover {
    color: white;
    background: red;
}
```

[PostCSS]: https://github.com/postcss/postcss


## Usage

See [PostCSS] docs for source map options and other special cases.

[PostCSS]: https://github.com/postcss/postcss

### Grunt

```js
grunt.initConfig({
    postcss: {
        options: {
            processors: [ require('postcss-mixins').postcss ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

grunt.loadNpmTasks('grunt-postcss');
```

### Gulp

```js
var postcss = require('gulp-postcss');

gulp.task('css', function () {
     return gulp.src('./src/*.css')
        .pipe(postcss([ require('postcss-mixins') ]))
        .pipe(gulp.dest('./dest'));
});
```
<commit_msg>Use PostCSS logo with left padding<commit_after># PostCSS Mixins [![Build Status](https://travis-ci.org/postcss/postcss-mixins.svg)](https://travis-ci.org/postcss/postcss-mixins)

<img align="right" width="135" height="95" src="http://postcss.github.io/postcss/logo-leftp.png" title="Philosopher’s stone, logo of PostCSS">

[PostCSS] plugin for mixins.

```css
@define-mixin icon $network $color {
    .icon.is-$(network) {
        color: $color;
    }
    .icon.is-$(network):hover {
        color: white;
        background: $color;
    }
}

@mixin icon twitter blue;
@mixin icon youtube red;
```

```css
.icon.is-twitter {
    color: blue;
}
.icon.is-twitter:hover {
    color: white;
    background: blue;
}
.icon.is-youtube {
    color: red;
}
.icon.is-youtube:hover {
    color: white;
    background: red;
}
```

[PostCSS]: https://github.com/postcss/postcss


## Usage

See [PostCSS] docs for source map options and other special cases.

[PostCSS]: https://github.com/postcss/postcss

### Grunt

```js
grunt.initConfig({
    postcss: {
        options: {
            processors: [ require('postcss-mixins').postcss ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

grunt.loadNpmTasks('grunt-postcss');
```

### Gulp

```js
var postcss = require('gulp-postcss');

gulp.task('css', function () {
     return gulp.src('./src/*.css')
        .pipe(postcss([ require('postcss-mixins') ]))
        .pipe(gulp.dest('./dest'));
});
```

{'fraction_non_alphanumeric': 0.18711233631977947, 'fraction_numerical': 0.0031013094417643005, 'mean_word_length': 2.8966442953020133, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4566020', 'n_tokens_mistral': 1069, 'n_tokens_neox': 1037, 'n_words': 197}