0.0.5 • Published 8 years ago
bettercss-preprocessor v0.0.5
bettercss-preprocessor
CSS preprocessor for BetterCSS built with PostCSS.
Installation
npm i --save bettercss-preprocessor
Usage
CLI
Process via command line
bettercss input.css output.css [options]
PostCSS
var postcss = require('postcss'),
bettercss = require('bettercss');
postcss([ bettercss() ])
.process(css, { from: 'input.css', to: 'output.css' })
.then(function (result) {
fs.writeFileSync('output.css', result.css);
});
Features
Imports
Consume local files, node modules or bower packages.
@import './style.css';
@import 'module'; /* == @import "./node_modules/module/index.css"; */
Plugin: postcss-import
Autoprefixer
Parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
.flex {
display: flex
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Plugin: Autoprefixer
Variables
Transforms CSS Custom Properties(CSS variables) syntax into a static representation.
:root {
--example: red;
}
.example {
color: var(--example);
}
Plugin: postcss-css-variables
Calc
Reduces calc() references whenever it's possible
.example {
color: calc(20px + 20px);
}
Plugin: postcss-calc
Media Queries
Transforms W3C CSS Custom Media Queries syntax to more compatible CSS.
@custom-media --small-viewport (max-width: 30em);
@media (--small-viewport) {
/* styles for small viewport */
}
Plugin: postcss-custom-media
Options
CLI
Usage: bettercss [<input>] [<output>]
Options:
-h, --help output usage information
-V, --version output the version number
-s, --sourcemap enable source maps
Examples:
# Pass an input and output file:
$ bettercss input.css output.css
# Enable source maps:
$ bettercss input.css output.css --sourcemap
Node.js
All features in BetterCSS can be toggled on or off by passing options. By default all core features are set to true.
Features
- import
- autoprefixer
- variables
- calc
- media
.bettercss({
// options
});