Skip to content

Instantly share code, notes, and snippets.

@npostulart
Last active November 7, 2017 20:06
Show Gist options
  • Save npostulart/c08107f4b700552c85e5 to your computer and use it in GitHub Desktop.
Save npostulart/c08107f4b700552c85e5 to your computer and use it in GitHub Desktop.
Simple Breakpoints Mixin
/// Simple Breakpoint Mixin
///
/// Takes list of arguments to define media queries
///
/// @author Niklas Postulart
/// @group layout
/// @param {Lists} $lists - Lists of queries
/// @example
/// .example {
/// @include breakpoint(min 100px, max 30rem) {
/// font-weight: bold;
/// }
/// }
///
/// // Outputs
/// @media only screen and (min-width: 100px) and (max-width: 30rem) {
/// .example {
/// font-weight: bold;
/// }
/// }
@mixin breakpoint($lists...) {
$media: only screen;
@each $list in $lists {
@if length($list) == 1 {
$media: append($media, "and (min-width: #{$list})");
} @else if length($list) == 2 {
@if nth($list, 1) == max {
$media: append($media, "and (max-width: #{nth($list, 2)})");
} @else {
$media: append($media, "and (min-width: #{nth($list, 2)})");
}
} @else {
@error 'Too many arguments set for breakpoint';
}
}
@media #{$media} {
@content;
}
}
/// Same as breakpoint mixin but only use one list
///
/// @author Niklas Postulart
/// @group layout
/// @param {List} $list - Query list
/// @requires breakpoint
/// @example
/// .example {
/// @include on(min 100px) {
/// font-weight: bold;
/// }
/// }
///
/// // Outputs
/// @media only screen and (min-width: 100px) {
/// .example {
/// font-weight: bold;
/// }
/// }
@mixin on($list) {
@include breakpoint($list) {
@content;
}
}
/// Wrapper for breakpoint mixin, uses only 2 breakpoints min and max
///
/// @author Niklas Postulart
/// @group layout
/// @param {Number} $min - min-width
/// @param {Number} $max - max-width
/// @requires breakpoint
/// @example
/// .example {
/// @include breakpoint(100px, 200px) {
/// font-weight: bold;
/// }
/// }
///
/// // Outputs
/// @media only screen and (min-width: 100px) and (max-width: 200px) {
/// .example {
/// font-weight: bold;
/// }
/// }
@mixin between($min, $max) {
@include breakpoint(min $min, max $max) {
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment