A CSS Processor with a CLI and Gulp Plugin built on PostCSS.
PostCSS is fast, very fast, but it can be a pain to intergrate into your build stream. Hipster fixs this with a CLI and a Glup Plugin, leveraging the speed of PostCSS and removing the intergration headaches.
npm install hipster-css
$header: #333; /* Declaring a variable */
h1 {
color: $header; /* Using a variable */
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
header {
h1 {
font-size: 36px;
}
}
@import "lib/normalize.css";
@import "media-queries/menu.css" (min-width: 480px);;
Reducing calc() references whenever it's possible with the postcss-calc plugin.
Note: When multiple units are mixed together in the same expression, the calc() statement is left as is, to fallback to the w3c calc() feature.
- If you supply one file the css of first file will be compiled and outputted to stdout.
- If you supply two files the css of the first file will be compiled and outputted to the second file. The second file will be created if it does not already exist or overwritten if it does exits.
As Hipster is built on PostCSS, it is really easy to add new plugin to allow for new syntax and functionality while retaining the easy of use of the CLI.
npm install <package> --save
var <plugin> = require('<plugin>');
.use('<plugin>')