shorthand-edge-omissions-stylus

Permit clockhand-stylus in padding/margin.

Preview

.foo
  padding 1 _
  margin  _ 1 2 _ !important

.foo {
  padding-top   : 1;
  padding-bottom: 2;
  
  margin-right  : 1 !important;
  margin-bottom : 1 !important;
}

Summary

• Stylus mixin (not function)
• _ in padding/margin shorthand (clockhand-stylus syntax)
• Opinion:
  • Writing margin/padding assignment becomes brisker since you can use shorthand 100% of the time
  • Edges are represented with "graphics" not words: margin: 4 3 _ _; vs margin-top:3; margin-right:3;
  • Collecting all padding or margin edges on one line eases maintainence and visual scanning
  • At scale, writing margin: 4px 0 0 17px; when you don't actually want zeros destablizes your css codebase with rule overriding possibilities

.
.
.

Install

npm install shorthand-edge-omissions-stylus --save

stylus.use(require('shorthand-edge-omissions-stylus')())
stylus.import('shorthand-edge-omissions')  // global import, optional
$ stylus ... --import ./node_modules/better-clockhand-stylus   // global import alt, optional

Documentation

Omissions allow you to skip values, whereas CSS forces you to assign something.

CSS     .foo { margin : 4px 0; }    .foo { padding: 0 25px 46px; }    .foo { padding: 4px 0 0 17px; }

Stylus  .foo { margin : 4px _; }    .foo { padding: _ 25px 46px; }    .foo { padding: 4px _ _ 17px; }

See clockhand-stylus syntax