scss 带有mixins的Bootstrap断点。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 带有mixins的Bootstrap断点。相关的知识,希望对你有一定的参考价值。

/**
 * 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%);
}

以上是关于scss 带有mixins的Bootstrap断点。的主要内容,如果未能解决你的问题,请参考以下文章

scss Bootstrap断点SASS mixin

scss CSS-断点-mixin的1.scss

scss CSS-断点,mixins.scss

scss 断点scss mixins

scss CSS-断点,mixins.scss

scss CSS-断点,mixins.scss