https://github.com/sha-red/compass-mixins/tree/master/lib
extended with more sass frameworks and as django app.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.4 KiB
106 lines
3.4 KiB
7 years ago
|
// ---------------------------------------------------------------------------
|
||
|
|
// Media Mixins
|
||
|
|
|
||
|
|
// Create a new layout context for (@content) descendants.
|
||
|
|
//
|
||
|
|
// $layout-cols : a (unitless) number of columns to use for this layout.
|
||
|
|
@mixin layout(
|
||
|
|
$layout-cols
|
||
|
|
) {
|
||
|
|
// store default $total-columns setting for later, then change it.
|
||
|
|
$default-layout : $total-columns;
|
||
|
|
$total-columns : $layout-cols !global;
|
||
|
|
|
||
|
|
// apply children in this new layout context.
|
||
|
|
@content;
|
||
|
|
|
||
|
|
// return to default $total-columns setting.
|
||
|
|
$total-columns : $default-layout !global;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Nest a block of code inside a new media-query and layout context.
|
||
|
|
//
|
||
|
|
// $media-layout : a list of values [$min $layout $max $ie] including...
|
||
|
|
// : - one unitless number (columns in a layout)
|
||
|
|
// : - two optional lengths (min and max-width media-query breakpoints).
|
||
|
|
// : - one optional boolean or string to trigger fallback support for IE.
|
||
|
|
// $font-size : [optional] The base font-size of your layout, if you are using ems.
|
||
|
|
// : - defaults to $base-font-size
|
||
|
|
@mixin at-breakpoint(
|
||
|
|
$media-layout,
|
||
|
|
$font-size: $base-font-size
|
||
|
|
) {
|
||
|
|
$media-layout : medialayout($media-layout,$font-size);
|
||
|
|
$min : nth($media-layout,1);
|
||
|
|
$layout : nth($media-layout,2);
|
||
|
|
$max : nth($media-layout,3);
|
||
|
|
$ie : nth($media-layout,4);
|
||
|
|
|
||
|
|
@if not($breakpoint-media-output) and not($breakpoint-ie-output) and not($breakpoint-raw-output) {
|
||
|
|
@warn "Either $breakpoint-media-output, $breakpoint-ie-output, or $breakpoint-raw-output must be true for at-breakpoint to work.";
|
||
|
|
}
|
||
|
|
|
||
|
|
// We need to have either a min-width breakpoint or a layout in order to proceed.
|
||
|
|
@if $min or $layout or $max {
|
||
|
|
|
||
|
|
// If we don't have a layout, we create one based on the min-width.
|
||
|
|
@if not($layout) {
|
||
|
|
$layout: get-layout($min);
|
||
|
|
}
|
||
|
|
|
||
|
|
// If we still don't have a layout, we have a problem.
|
||
|
|
@if $layout {
|
||
|
|
// Set our new layout context.
|
||
|
|
@include layout($layout) {
|
||
|
|
@if $breakpoint-media-output {
|
||
|
|
@include with-browser-ranges(css-mediaqueries) {
|
||
|
|
@if $min and $max {
|
||
|
|
// Both $min and $max
|
||
|
|
@media (min-width: $min) and (max-width: $max) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
@if not($min) and not($max) {
|
||
|
|
// Neither $min nor $max:
|
||
|
|
// We can create a breakpoint based on the number of columns in the layout.
|
||
|
|
$min: fix-ems(container-outer-width($width: false));
|
||
|
|
}
|
||
|
|
@if $min {
|
||
|
|
// Min only:
|
||
|
|
@media (min-width: $min) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
// Max only:
|
||
|
|
@media (max-width: $max) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Set an IE fallback
|
||
|
|
@if $ie and $breakpoint-ie-output {
|
||
|
|
@if (type-of($ie) == 'bool') {
|
||
|
|
$ie: 'lt-ie9';
|
||
|
|
}
|
||
|
|
.#{$ie} & {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $breakpoint-raw-output {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
@warn "We were unable to determine a layout for your breakpoint.";
|
||
|
|
}
|
||
|
|
|
||
|
|
} @else {
|
||
|
|
@warn "You need to provide either a valid layout (number of columns)"
|
||
|
|
+ "or a valid media-query min-width breakpoint (length).";
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|