Я использую это вне 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 аналогичен map-has-key, который встроен в sass, но проверяет наличие нескольких ключей.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).Третий аргумент принимает либо пейзаж, либо портрет.Вы можете даже настроить микс в make 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) {
...
}