scss 带有mixins的Bootstrap断点。

Posted 2021-05-18

/**
 * Boostrap clearfix
 * --
 * @type {[type]}
 */


// Mixin itself
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}



/**
 * Boostrap Breakpoints / Mixins
 * --
 * @type {[type]}
 */

$mbl: 360px;
$mbl_wide: 480px;
$tablet: 768px;
$tablet_wide: 992px;
$desktop: 1200px;
$desktop_wide: 1600px;

@mixin mobile {
  @media (min-width: #{$mbl}) {
    @content;
  }
}

@mixin mobile_wide {
  @media (min-width: #{$mbl_wide}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tablet}) {
    @content;
  }
}

@mixin tablet_wide {
  @media (min-width: #{$tablet_wide}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop}) {
    @content;
  }
}

@mixin desktop_wide {
  @media (min-width: #{$desktop_wide}) {
    @content;
  }
}

/**
 * V - Center
 * --
 * @type {[type]}
 */

.center_content{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}