node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

precss

PreCSS Build Status

PreCSS is a tool that allows you to use Sass-like markup in your CSS files.

Enjoy a familiar syntax with variables, mixins, conditionals, and other goodies.

Variables

/* before */
 
$blue: #056ef0;
$column: 200px;
 
.menu {
    width: calc(4 * $column);
}
 
.menu_link {
    background: $blue;
    width: $column;
}
 
/* after */
 
.menu {
    width: calc(4 * 200px);
}
 
.menu_link {
    background: #056ef0;
    width: 200px;
}

Conditionals

/* before */
 
.notice--clear {
    @if 3 < 5 {
        background: green;
    }
    @else {
        background: blue;
    }
}
 
/* after */
 
.notice--clear {
    background: green;
}

Loops

/* before */
 
@for $i from 1 to 3 {
    .b-$i { width: $(i)px; }
}
 
/* after */
 
.b-1 {
    width: 1px
}
.b-2 {
    width: 2px
}
.b-3 {
    width: 3px
}
/* before */
 
@each $icon in (foo, bar, baz) {
    .icon-$(icon{
        background: url('icons/$(icon).png');
    }
}
 
/* after */
 
.icon-foo {
    background: url('icons/foo.png');
}
 
.icon-bar {
    background: url('icons/bar.png');
}
 
.icon-baz {
    background: url('icons/baz.png');
}

Mixins

/* before */
 
@define-mixin icon $name {
    padding-left: 16px;
 
    &::after {
        content: "";
        background-image: url(/icons/$(name).png);
    }
}
 
.search {
    @mixin icon search;
}
 
/* after */
 
.search {
    padding-left: 16px;
}
 
.search::after {
    content: "";
    background-image: url(/icons/search.png);
}

Extends

/* before */
 
@define-extend bg-green {
    background: green;
}
 
.notice--clear {
    @extend bg-green;
}
 
/* after */
 
.notice--clear {
    background: green;
}

Imports

/* Before */
 
@import "partials/base"; /* Contents of partials/_base.css: `body { background: black; }` */
 
 
/* After */
 
body { background: black; }

Property Lookup

/* Before */
 
.heading {
    margin: 20px;
    padding: @margin;
}
 
/* After */
 
.heading {
    margin: 20px;
    padding: 20px;
}

Root

/* Before */
 
.parent {
    background: white;
 
    @at-root{
        .child {
            background: black;
        }
    }
}
 
/* After */
 
.child {
    background: black;
}
 
.parent {
    background: white;
}

Usage

Follow these simple steps to use PreCSS.

Add PreCSS to your build tool:

npm install precss --save-dev

Add the PostCSS SCSS parser to your build tool:

npm install postcss-scss --save-dev

Node

require('precss')({ /* options */ }).process(YOUR_CSS, { parser: require('postcss-scss') });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load PreCSS as a PostCSS plugin:

postcss([
    require('precss')({ /* options */ })
]).process(YOUR_CSS, { parser: require('postcss-scss') }).then(function (result) {
    // do something with result.css 
});

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable PreCSS within your Gulpfile:

var postcss = require('gulp-postcss');
 
gulp.task('css', function () {
    return gulp.src('./css/src/*.css').pipe(
        postcss([
            require('precss')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('./css')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install precss --save-dev

Enable PreCSS within your Gruntfile:

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

Plugins

PreCSS blends Sass-like strength with W3C future-syntax superpower, powered by the following plugins (in this order):