Skip to content

Instantly share code, notes, and snippets.

@ryanve
Created June 13, 2017 04:18
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ryanve/f3a11229e5985cf48d460d38b57099bb to your computer and use it in GitHub Desktop.
between margin classes idea
.mt0-between:not(:first-child) { margin-top: 0 }
.mt1-between:not(:first-child) { margin-top: var(--space-1) }
.mt2-between:not(:first-child) { margin-top: var(--space-2) }
.mt3-between:not(:first-child) { margin-top: var(--space-3) }
.mt4-between:not(:first-child) { margin-top: var(--space-4) }
.ml0-between:not(:first-child) { margin-left: 0 }
.ml1-between:not(:first-child) { margin-left: var(--space-1) }
.ml2-between:not(:first-child) { margin-left: var(--space-2) }
.ml3-between:not(:first-child) { margin-left: var(--space-3) }
.ml4-between:not(:first-child) { margin-left: var(--space-4) }
.mr0-between:not(:last-child) { margin-right: 0 }
.mr1-between:not(:last-child) { margin-right: var(--space-1) }
.mr2-between:not(:last-child) { margin-right: var(--space-2) }
.mr3-between:not(:last-child) { margin-right: var(--space-3) }
.mr4-between:not(:last-child) { margin-right: var(--space-4) }
.mb0-between:not(:last-child) { margin-bottom: 0 }
.mb1-between:not(:last-child) { margin-bottom: var(--space-1) }
.mb2-between:not(:last-child) { margin-bottom: var(--space-2) }
.mb3-between:not(:last-child) { margin-bottom: var(--space-3) }
.mb4-between:not(:last-child) { margin-bottom: var(--space-4) }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment