_size.scss (1108B)
1 @charset "UTF-8"; 2 3 /// Sets the `width` and `height` of the element. 4 /// 5 /// @param {List} $size 6 /// A list of at most 2 size values. 7 /// 8 /// If there is only a single value in `$size` it is used for both width and height. All units are supported. 9 /// 10 /// @example scss - Usage 11 /// .first-element { 12 /// @include size(2em); 13 /// } 14 /// 15 /// .second-element { 16 /// @include size(auto 10em); 17 /// } 18 /// 19 /// @example css - CSS Output 20 /// .first-element { 21 /// width: 2em; 22 /// height: 2em; 23 /// } 24 /// 25 /// .second-element { 26 /// width: auto; 27 /// height: 10em; 28 /// } 29 /// 30 /// @todo Refactor in 5.0.0 to use a comma-separated argument 31 32 @mixin size($value) { 33 $width: nth($value, 1); 34 $height: $width; 35 36 @if length($value) > 1 { 37 $height: nth($value, 2); 38 } 39 40 @if is-size($height) { 41 height: $height; 42 } @else { 43 @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin."; 44 } 45 46 @if is-size($width) { 47 width: $width; 48 } @else { 49 @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin."; 50 } 51 }