| 1 | @charset "UTF-8"; |
| 2 | |
| 3 | /// Sets the `width` and `height` of the element in one statement. |
| 4 | /// |
| 5 | /// @argument {number (with unit) | string} $width |
| 6 | /// |
| 7 | /// @argument {number (with unit) | string} $height [$width] |
| 8 | /// |
| 9 | /// @example scss |
| 10 | /// .first-element { |
| 11 | /// @include size(2em); |
| 12 | /// } |
| 13 | /// |
| 14 | /// // CSS Output |
| 15 | /// .first-element { |
| 16 | /// width: 2em; |
| 17 | /// height: 2em; |
| 18 | /// } |
| 19 | /// |
| 20 | /// @example scss |
| 21 | /// .second-element { |
| 22 | /// @include size(auto, 10em); |
| 23 | /// } |
| 24 | /// |
| 25 | /// // CSS Output |
| 26 | /// .second-element { |
| 27 | /// width: auto; |
| 28 | /// height: 10em; |
| 29 | /// } |
| 30 | /// |
| 31 | /// @require {function} _is-size |
| 32 | |
| 33 | @mixin size( |
| 34 | $width, |
| 35 | $height: $width |
| 36 | ) { |
| 37 | @if _is-size($height) { |
| 38 | height: $height; |
| 39 | } @else { |
| 40 | @error "`#{$height}` is not a valid length for the `$height` argument " + |
| 41 | "in the `size` mixin."; |
| 42 | } |
| 43 | |
| 44 | @if _is-size($width) { |
| 45 | width: $width; |
| 46 | } @else { |
| 47 | @error "`#{$width}` is not a valid length for the `$width` argument " + |
| 48 | "in the `size` mixin."; |
| 49 | } |
| 50 | } |