CSS Nesting ![Build Status](https://travis-ci.org/jonathantneal/postcss-nesting.svg)
CSS Nesting is a PostCSS plugin that allows you to nest one style rule inside another, similar to Sass, but following the [CSS Nesting Module Level 3] specification.
This greatly increases the modularity and maintainability of CSS stylesheets.
a, b {
color: red;
@nest c, d {
color: white;
@nest & & {
color: blue;
}
@nest &:hover {
color: black;
}
@media (min-width: 30em) {
color: yellow;
}
}
a, b {
color: red;
}
a c, b c, a d, b d {
color: white;
}
a a, a b, b a, b b {
color: blue;
}
a:hover, b:hover {
color: black;
}
@media (min-width: 30em) {
a, b {
color: yellow;
}
}
Usage
Follow these steps to use CSS Nesting.
Add CSS Nesting to your build tool:
npm install postcss-nesting --save-dev
Node
require('postcss-nesting')({ }).process(YOUR_CSS);
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load CSS Nesting as a PostCSS plugin:
postcss([
require('postcss-nesting')({ })
]);
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable CSS Nesting within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./css/src/*.css').pipe(
postcss([
require('postcss-nesting')({ })
])
).pipe(
gulp.dest('./css')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable CSS Nesting within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-nesting')({ })
]
},
dist: {
src: 'css/*.css'
}
}
});
Options
bubble
Type: Array
Default: ['document', 'media', 'supports']
Specifies additional at-rules whose contents should be transpiled so that the at-rule comes first. By default, @media
, @supports
and @document
will do this.
prefix
Type: String
Default: null
Specifies a prefix to be surrounded by dashes before the @nest
at-rule (e.g. @-x-nest
).