// Breakpoint Integration // ======================
$susy-media: () !default; $susy-media-fallback: false !default;
$_susy-media-context: ();
// Susy Breakpoint // ————— // Change grids at different media query breakpoints. // - $query : <min-width> [<max-width>] | <property> <value> | <map> // - $layout : <settings> // - $no-query : <boolean> | <selector> @mixin susy-breakpoint(
$query, $layout: false, $no-query: $susy-media-fallback
) {
@include susy-media-router($query, $no-query) { @if $layout { @include with-layout($layout) { @content; } } @else { @content; } }
}
// Susy Media // ———- // - $query: <min-width> [<max-width>] | <property> <value> // - $no-query: <boolean> | <selector> @mixin susy-media(
$query, $no-query: $susy-media-fallback
) {
$old-context: $_susy-media-context; $name: if(map-has-key($susy-media, $query), $query, null); $query: susy-get-media($query); $query: susy-parse-media($query); @include susy-media-context($query, $name); @if $no-query and type-of($no-query) != string { @content; } @else { @media #{susy-render-media($query)} { @content; } @if type-of($no-query) == string { #{$no-query} & { @content; } } } @include susy-media-context($old-context, $clean: true);
}
// Media Router // ———— // Rout media arguments to the correct mixin. @mixin susy-media-router(
$query, $no-query: $susy-media-fallback
) {
@if susy-support(breakpoint, (mixin: breakpoint), $warn: false) { @include breakpoint($query, $no-query) { @content; } } @else { @include susy-media($query, $no-query) { @content; } }
}
// Update Context // ————- // Set the new media context @mixin susy-media-context(
$query, $name: null, $clean: false
) {
$query: map-merge((name: $name), $query); @if $clean { $_susy-media-context: $query !global; } @else { $_susy-media-context: map-merge($_susy-media-context, $query) !global; }
}
// Media Context // ————- // Return the full media context, or a single media property (e.g. min-width) @function susy-media-context(
$property: false
) {
@if $property { @return map-get($_susy-media-context, $property); } @else { @return $_susy-media-context; }
}
// Get Media // ——— // Return a named media-query from $susy-media. // - $name: <key> @function susy-get-media(
$name
) {
@if map-has-key($susy-media, $name) { $map-value: map-get($susy-media, $name); @if ($name == $map-value) { $name: $map-value; } @else { $name: susy-get-media($map-value); } } @return $name;
}
// Render Media // ———— // Build a media-query string from various media settings @function susy-render-media(
$query
) {
$output: null; @each $property, $value in $query { $string: null; @if $property == media { $string: $value; } @else { $string: '(#{$property}: #{$value})'; } $output: if($output, '#{$output} and #{$string}', $string); } @return $output;
}
// Parse Media // ———– // Return parsed media-query settings based on shorthand @function susy-parse-media(
$query
) {
$mq: null; @if type-of($query) == map { $mq: $query; } @else if type-of($query) == number { $mq: (min-width: $query); } @else if type-of($query) == list and length($query) == 2 { @if type-of(nth($query, 1)) == number { $mq: ( min-width: min($query...), max-width: max($query...), ); } @else { $mq: (nth($query, 1): nth($query, 2)); } } @else { $mq: (media: '#{$query}'); } @return $mq;
}