shorthand-edge-omissions-stylus

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

npm install shorthand-edge-omissions-stylus
3 downloads in the last week
12 downloads in the last month

shorthand-edge-omissions-stylus Build Status

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

npm loves you