app/assets/stylesheets/functions/_new-breakpoint.scss in neat-1.7.0.rc vs app/assets/stylesheets/functions/_new-breakpoint.scss in neat-1.7.0
- old
+ new
@@ -1,35 +1,38 @@
-/**
- * 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;
- * }
- * }
- */
+/// 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;
}