Use Sass-like markup in your CSS
JavaScript
Latest commit 526e304 Oct 23, 2015 @jonathantneal 1.4.0
- Added: At-Root 0.1.2
- Added: Property Lookup 1.1.3
- Updated: Tests and documentation
Permalink
Failed to load latest commit information.
test 1.4.0 Oct 24, 2015
.editorconfig 1.3.0 Oct 22, 2015
.eslintrc 1.3.0 Oct 22, 2015
.gitignore 1.3.0 Oct 22, 2015
.npmignore 1.3.0 Oct 22, 2015
.travis.yml 1.3.0 Oct 22, 2015
CHANGELOG.md 1.4.0 Oct 24, 2015
CONTRIBUTING.md 1.3.0 Oct 22, 2015
LICENSE.md Update plugin scaffolding Jul 6, 2015
README.md 1.4.0 Oct 24, 2015
gulpfile.js Update plugin scaffolding Jul 6, 2015
index.js 1.4.0 Oct 24, 2015
package.json 1.4.0 Oct 24, 2015

README.md

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-url: url(/icons/$(name).png);
    }
}

.search {
    @mixin icon search;
}

/* after */

.search {
    padding-left: 16px;
}

.search::after {
    content: "";
    background-url: 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):