JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 89036
  • Score
    100M100P100Q13036F
  • License CC0-1.0

Use Sass-like markup in your CSS

Package Exports

  • precss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (precss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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):