❤
npm
Sign UpSign In

postcss-sass-extend

0.0.1 • Public • Published

PostCSS Sass Extend Build Status

PostCSS Sass Extend is a PostCSS plugin that allows you to use @extend and placeholder classes like you do in Sass.

/* before */
 
%placeholder {
    color: blue;
}
 
%unused-placeholder {
    color: yellow;
}
 
.a {
    @extend %placeholder;
 
    background-color: black;
}
 
.b {
    color: red;
}
 
.c {
    background-color: white;
 
    @extend %placeholder;
}
 
.d {
    color: green;
}
 
/* after */
 
.a, .c {
    color: blue;
}
 
.a {
 
    background-color: black;
}
 
.b {
    color: red;
}
 
.c {
    background-color: white;
}
 
.d {
    color: green;
}

Usage

You just need to follow these two steps to use PostCSS Sass Extend:

  1. Add PostCSS to your build tool.
  2. Add PostCSS Sass Extend as a PostCSS process.
npm install postcss-sass-extend --save-dev

Node

postcss([ require('postcss-sass-extend')({ /* options */ }) ])

Grunt

Add [Grunt PostCSS] to your build tool:

npm install postcss-sass-extend --save-dev

Enable PostCSS Sass Extend within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');
 
grunt.initConfig({
    postcss: {
        options: {
            processors: [
                require('postcss-sass-extend')({ /* options */ })
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

/postcss-sass-extend/

    Package Sidebar

    Install

    npm i postcss-sass-extend

    Repository

    github.com/jonathantneal/postcss-sass-extend

    Homepage

    github.com/jonathantneal/postcss-sass-extend

    Weekly Downloads

    66

    Version

    0.0.1

    License

    CC0-1.0

    Last publish

    Collaborators

    • romainmenke
    • alaguna
    • jonathantneal
    Try on RunKit
    Report malware