我在Bootstrap之外使用这个。你应该可以在Bootstrap或任何其他框架中使用它，从而使你的媒体查询更加灵活。
// Extra map functions by Hugo Giraudel
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
@function map-has-keys($map, $keys...) {
@each $key in $keys {
@if not map-has-key($map, $key) {
@return false;
}
}
@return true;
}
@function map-has-nested-keys($map, $keys...) {
@each $key in $keys {
@if not map-has-key($map, $key) {
@return false;
}
$map: map-get($map, $key);
}
@return true;
}
这些是Hugo Giraudel编写的额外地图函数。map-deep-get基本上是一个简化的嵌套map-get函数。map-has-keys类似于sass内置的map-has-key，但会检查多个键。map-has-nested-keys在此基础上扩展，检查嵌套键。这对于该方法至关重要。我肯定会研究他构建的额外Sass函数。我已经很容易地找到了它们的用途。
// Map
$sizes: (
null: (
breakpoint: 0,
container: 100%
),
xs: (
breakpoint: 480px,
container: 464px
),
sm: (
breakpoint: 768px,
container: 750px
),
md: (
breakpoint: 992px,
container: 970px
),
lg: (
breakpoint: 1200px,
container: 1170px
)
);
这是一个简单的断点地图。我通常将其用作项目中所有设置的基础地图，因此会在其中包含基本字体大小等内容。
// Breakpoint mixin
@mixin break($screen-min: null, $screen-max: null, $orientation: null) {
$min: $screen-min;
$max: $screen-max;
$o: $orientation;
$query: unquote("only screen");
@if $min != null and $min != "" {
@if map-has-nested-keys($base, sizes, $screen-min) {
$min: map-deep-get($base, sizes, $screen-min, breakpoint);
}
@else {
$min: $screen-min;
}
@if is-number($min) {
$query: append($query, unquote("and (min-width: #{$min})"));
}
}
@if $max != null and $max != "" {
@if map-has-nested-keys($base, sizes, $screen-max) {
$max: map-deep-get($base, sizes, $screen-max, breakpoint);
}
@else {
$max: $screen-max;
}
@if is-number($max) {
$query: append($query, unquote("and (max-width: #{$max})"));
}
}
@if $orientation == landscape or $orientation == portrait {
$o: $orientation;
$query: append($query, unquote("and (orientation: #{$o})"));
}
@else {
$o: null;
}
@media #{$query} {
@content;
}
};
这是一个混合器。您可以使用尺寸映射中的键（xs，sm，md，lg）作为前两个参数，或者您可以使用自定义值（例如30em）。第三个参数接受横向或纵向。您甚至可以自定义混合器，将l = landscape和p = portrait。
此外，如果您只想要一个方向，例如，您可以传递参数（null，null，landscape）。
为了清晰起见，这里有一些示例：
@include break(null, md, landscape) {
...
}
@include break(null, null, landscape) {
...
}
@include break(md) {
...
}
@include break(null, md) {
...
}
@include break(480px) {
...
}
输出：
@media only screen and (max-width: 992px) and (orientation: landscape) {
...
}
@media only screen and (orientation: landscape) {
...
}
@media only screen and (min-width: 992px) {
...
}
@media only screen and (max-width: 992px) {
...
}
@media only screen and (min-width: 480px) {
...
}
