precss

Use Sass-like markup and staged CSS features in CSS

CC0-1.0 25 个版本
postcss css postcss-plugin sass scss variables conditionals iterations iterators iterables iterate contents eaches elses fors ifs includes imports medias queries query mixins defaults functions colors customs dirs system-ui image-set logical properties blocks inlines starts ends any-link font-variant overflow-wrap system-ui caniuse
主页
仓库
提交 Issue
安装
npm install precss
yarn add precss
pnpm add precss
bun add precss
README

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

版本列表
4.0.0 2018-11-23
3.1.2 2018-02-28
3.1.1 2018-02-21
3.1.0 2018-01-22
3.0.0 2018-01-17
2.0.0 2017-06-29
1.4.0 2015-12-31
1.3.0 2015-10-22
1.2.3 2015-09-24
1.2.2 2015-09-24
1.2.1 2015-09-24
1.2.0 2015-09-24
1.1.3 2015-09-14
1.1.2 2015-09-08
1.1.1 2015-09-08
1.1.0 2015-09-08
1.0.0 2015-09-07
0.3.0 2015-07-22
0.2.2 2015-07-10
0.2.1 2015-07-10
0.2.0 2015-07-10
0.1.3 2015-07-08
0.1.2 2015-07-08
0.1.1 2015-07-08
0.1.0 2015-07-08