shorthand-edge-omissions-stylus

Allow omitted values in shorthand 1-value, 2-value, 3-value, 4-value padding and margin.

shorthand-edge-omissions-stylus

Permit clockhand-stylus in padding/margin.

.foo
  padding 1 _
  margin  _ 1 2 _ !important
 
.foo {
  padding-top   : 1;
  padding-bottom: 2;
  
  margin-right  : 1 !important;
  margin-bottom : 1 !important;
}
  • 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

.
.
.

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

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