PostCSS Short has been featured in Smashing Magazine . I hope all of these shorthands are useful and clear to first-time lookers. I hope they improve the readability of your stylesheets and save you development time along the way. Thank you so much for your support.
/* before */ . icon { size : forty-eight px ; } /* after */ . icon { width : forty-eight px ; height : forty-eight px ; }
/* before */ . frame { margin : * auto; } /* after */ . frame { margin-right : auto; margin-left : auto; }
/* before */ . banner { position : fixed zero zero * ; } /* after */ . banner { position : fixed; top : zero ; right : zero ; left : zero ; }
/* before */ . canvas { color : # abccfc # two hundred and twelve thousand two hundred and thirty-one ; } /* after */ . canvas { color : # abccfc ; background-color : # two hundred and twelve thousand two hundred and thirty-one ; }
/* before */ . scrollable { overflow : * auto; } /* after */ . scrollable { overflow-y : auto; }
/* before */ . container { border : one px two px / * / # three hundred and forty-three thousand four hundred and thirty-four ; } . container--variation { border-width : * * three px ; } /* after */ . container { border-width : one px two px ; border-color : # three hundred and forty-three thousand four hundred and thirty-four ; } . container--variation { border-bottom-width : three px ; }
/* before */ . container { border-bottom-radius : ten px ; } /* after */ . container { border-bottom-left-radius : ten px ; border-bottom-right-radius : ten px ; }
/* before */ . heading { font-size : one point two five em / two ; } /* after */ . heading { font-size : one point two five em ; line-height : two ; }
/* before */
p { font-weight : light; } /* after */
p { font-weight : three hundred ; }
npm install postcss-short --save-dev
const postcssShort = require ( 'postcss-short' ) ;
postcssShort . process ( YOUR_CSS /*, processOptions, pluginOptions */ ) ;
const postcss = require ( 'postcss' ) ;
const postcssShort = require ( 'postcss-short' ) ;
postcss ( [
postcssShort ( /* pluginOptions */ )
] ) . process ( YOUR_CSS /*, processOptions */ ) ;
| |
|
|
|
|
|
|---|
-
PostCSS Short Border -
PostCSS Short Border Radius -
PostCSS Short Color -
PostCSS Short Font-Size -
PostCSS Short Overflow -
PostCSS Short Position -
PostCSS Short Size -
PostCSS Short Spacing -
PostCSS Font Weights
postcssShort ( {
features : {
'font-size' : {
prefix : 'x'
} ,
'position' : false
}
} ) ;
postcssShort ( { prefix : 'x' } ) ; .example-1 { -x-border-color : blue blue * ; -x-color : * #fafafa ; } /* becomes */
.example-1 { border-top-color : blue; border-right-color : blue; border-left-color : blue; background-color : #fafafa ; }
postcssShort ( { skip : '-' } ) ; .example-1 { border-color : blue blue -; color : - #fafafa ; } /* becomes */
.example-1 { border-top-color : blue; border-right-color : blue; border-left-color : blue; background-color : #fafafa ; } 
