scss 创建实用程序类以强制执行垂直间距

Posted 2021-05-18

/**
 * The base font size
 *
 * @nuclide Font Size
 * @section Config > Typography
 */
$type__size--base: 16px;

@import './typography';

/**
 * The vertical spacing default
 *
 * @nuclide vertical-spacing
 * @section Config > Spacing
 */
$g-spacing: $type__size--base !default;


/**
 * The map of vertical layout spacings

 * Decrease: 12, 8, 4
 * Increase: 24, 32, 40, 48, 56, 72, 96
 *
 * @nuclide vertical-spacings
 * @section Config > Spacing
 */
$vertical-spacing: (
  small:  (
    1x: floor($g-spacing - 4),
    2x: floor($g-spacing / 2),
    3x: floor($g-spacing / 4),
  ),
  large: (
    1x: ceil($g-spacing / 2 * 3),
    2x: ceil($g-spacing / 2 * 4),
    3x: ceil($g-spacing / 2 * 5),
    4x: ceil($g-spacing / 2 * 6),
    5x: ceil($g-spacing / 2 * 7),
    6x: ceil($g-spacing / 2 * 9),
    7x: ceil($g-spacing / 2 * 12),
  )
);


/**
 * Base vertical spacing class
 */
.u-spacing {
  margin-bottom: $g-spacing;
}


/**
 * Loop over the map and create vertical layout utility classes
 * Example: `.u-spacing__large--2x`
 */
// Loop over the vertical spacing map
@each $size, $collection in $vertical-spacing {

  // Loop over each collection (ie 'small')
  @each $x, $spacing in $collection {
    .u-spacing__#{$size}--#{$x} {
      margin-bottom: $spacing + px;
    }
  }

}