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