jonathantneal/precss


Use Sass-like markup in your CSS

https://jonathantneal.github.io/precss/

License: CC0-1.0

Language: CSS


PreCSS PostCSS Logo

NPM Version Build Status Support Chat

PreCSS lets you use Sass-like markup and staged CSS features in CSS.

$blue: #056ef0;
$column: 200px;

.menu {
  width: calc(4 * $column);
}

.menu_link {
  background: $blue;
  width: $column;
}

/* becomes */

.menu {
  width: calc(4 * 200px);
}

.menu_link {
  background: #056ef0;
  width: 200px;
}

PreCSS combines Sass-like syntactical sugar — like variables, conditionals, and iterators — with emerging CSS features — like logical and custom properties, media query ranges, and image sets.

Usage

Add PreCSS to your build tool:

npm install precss --save-dev

Node

Use PreCSS to process your CSS:

import precss from 'precss';

precss.process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PreCSS as a plugin:

import postcss from 'postcss';
import precss from 'precss';

postcss([
  precss(/* options */)
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PreCSS in your Gulpfile:

import postcss from 'gulp-postcss';
import precss from 'precss';

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

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PreCSS in your Gruntfile:

import precss from 'precss';

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        precss(/* options */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

Plugins

PreCSS is powered by the following plugins (in this order):

Project Statistics

Sourcerank 18
Repository Size 410 KB
Stars 1,397
Forks 77
Watchers 30
Open issues 17
Dependencies 16
Contributors 10
Tags 5
Created
Last updated
Last pushed

Top Contributors See all

Jonathan Neal Rob Loach David Clark Josh Duff James Boelen Nate Lubeck Nick Marchenko Fangzhou Li Christian Kaisermann Paco Segovia

Packages Referencing this Repo

precss
Use Sass-like markup and staged CSS features in CSS
Latest release 4.0.0 - Updated - 1.4K stars
postcss-sassy
PostCSS plugin sassy
Latest release 0.0.2 - Updated - 1.4K stars

Recent Tags See all

v1.3.0 October 22, 2015
v1.2.3 September 24, 2015
v1.2.2 September 24, 2015
v1.2.1 September 24, 2015
v1.1.3 September 14, 2015

Interesting Forks See all

pyaesone/precss
Use Sass-like markup in your CSS
JavaScript - Last pushed - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2018-11-26 12:50:10 UTC

Login to resync this repository