_size.scss 1.1 KB

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