- Notifications
You must be signed in to change notification settings - Fork77
Use Sass-like markup in your CSS
License
csstools/precss
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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, anditerators — with emerging CSS features — like logical and custom properties,media query ranges, and image sets.
AddPreCSS to your build tool:
npm install precss --save-dev
UsePreCSS to process your CSS:
importprecssfrom'precss';precss.process(YOUR_CSS);
AddPostCSS to your build tool:
npm install postcss --save-dev
UsePreCSS as a plugin:
importpostcssfrom'postcss';importprecssfrom'precss';postcss([precss(/* options */)]).process(YOUR_CSS);
AddGulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
UsePreCSS in your Gulpfile:
importpostcssfrom'gulp-postcss';importprecssfrom'precss';gulp.task('css',function(){returngulp.src('./src/*.css').pipe(postcss([precss(/* options */)])).pipe(gulp.dest('.'));});
AddGrunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
UsePreCSS in your Gruntfile:
importprecssfrom'precss';grunt.loadNpmTasks('grunt-postcss');grunt.initConfig({postcss:{options:{use:[precss(/* options */)]},dist:{src:'*.css'}}});
PreCSS is powered by the following plugins (in this order):
About
Use Sass-like markup in your CSS
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors10
Uh oh!
There was an error while loading.Please reload this page.