diff options
author | HombreLaser <sebastian-440@live.com> | 2024-02-08 16:36:31 -0600 |
---|---|---|
committer | HombreLaser <sebastian-440@live.com> | 2024-02-08 16:36:31 -0600 |
commit | e182245d3205d929881f51da9b48d6c4ed97a682 (patch) | |
tree | d390e8754dec70a9c9293afb801321b96f043c15 /_sass/neat/functions/_new-breakpoint.scss |
Diffstat (limited to '_sass/neat/functions/_new-breakpoint.scss')
-rw-r--r-- | _sass/neat/functions/_new-breakpoint.scss | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/_sass/neat/functions/_new-breakpoint.scss b/_sass/neat/functions/_new-breakpoint.scss new file mode 100644 index 0000000..41ab955 --- /dev/null +++ b/_sass/neat/functions/_new-breakpoint.scss @@ -0,0 +1,49 @@ +@charset "UTF-8"; + +/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat. +/// +/// @param {List} $query +/// A list of media query features and values. Each `$feature` should have a corresponding `$value`. +/// +/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. +/// +/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). +/// +/// @param {Number (unitless)} $total-columns [$grid-columns] +/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. +/// +/// @example scss - Usage +/// $mobile: new-breakpoint(max-width 480px 4); +/// +/// .element { +/// @include media($mobile) { +/// @include span-columns(4); +/// } +/// } +/// +/// @example css - CSS Output +/// @media screen and (max-width: 480px) { +/// .element { +/// display: block; +/// float: left; +/// margin-right: 7.42297%; +/// width: 100%; +/// } +/// .element:last-child { +/// margin-right: 0; +/// } +/// } + +@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) { + @if length($query) == 1 { + $query: $default-feature nth($query, 1) $total-columns; + } @else if is-even(length($query)) { + $query: append($query, $total-columns); + } + + @if is-not(belongs-to($query, $visual-grid-breakpoints)) { + $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; + } + + @return $query; +} |