Spacing
Update your layout without creating new classes. Spacing helpers are useful for modifying the padding and margin of an element.
Type
  • m - to set margin
  • p - to set padding
Direction
  • t - to set top
  • r - to set right
  • b - to set bottom
  • l - to set left
  • x - to set x-axis
  • y - to set y-axis
  • a - to set all
Size
  • 0 - removes margin or padding for specified direction
  • 1 - applies margin or padding with 16px * .25
  • 2 - applies margin or padding with 16px * .50
  • 3 - applies margin or padding with 16px
  • 4 - applies margin or padding with 16px * 1.5
  • 5 - applies margin or padding with 16px * 3
Example of spacers variable
<p class="mt-1">...</p>
 
<li class="pb-2">...</li>
 
<v-btn color="primary" class="ma-3">...</v-btn>
$spacer := 16px
$spacer-x := $spacer
$spacer-y := $spacer
 
$spacers := {
 zero: {
   x: 0,
   y: 0
 },
 one: {
   x: ($spacer-x * .25),
   y: ($spacer-y * .25)
 },
 two: {
   x: ($spacer-x * .5),
   y: ($spacer-y * .5)
 },
 three: {
   x: $spacer-x,
   y: $spacer-y
 },
 four: {
   x: ($spacer-x * 1.5),
   y: ($spacer-y * 1.5)
 },
 five: {
   x: ($spacer-x * 3),
   y: ($spacer-y * 3)
 }
}