Anidando clases de CSS con Nested

Si usas pre-procesadores, Nesting te va a gustar. Se trata de un plugin de PostCSS que extienden la sintaxis de CSS; similar a SASS y Stylus, cómo por ejemplo, la posibilidad de anidar clases. 

Primero, lo agregamos como dependencia desde NPM: 

npm install --save-dev postcss-nested 

Y luego lo agregamos a nuestros Gulp: 

gulp.task(‘css’,function () {

     var processors = [

    autoprefixer({  browsers: [ ‘> 5%’, ’ie 8 ’ ]  }),

    cssnested

]

     return gulp.src(‘./src/*.css’)

        .pipe(postcss(processor))

        .pipe(gulp.dest(‘./dist/css’’)) 

        .pipe(browserSync.stream()) 

})

Entonces, se facilita la forma de añadir estilos a todas las clases hijas, no olvidando poner el prefijo &-: 

.padre {

//Estilos del padre

       &-hijo{

          //Estilos del hijo

       }

}