Source: spacing.scss

  1. /**
  2. * @namespace Spacing
  3. */
  4. /**
  5. * @namespace Spacing:spacing-value
  6. */
  7. /**
  8. * Return a spacing value defined in the jig config, based on a breakpoint.
  9. *
  10. * @memberof Spacing:spacing-value
  11. * @function
  12. * @name spacing-value
  13. * @alias spacing-value
  14. *
  15. * @param {String} $size - on of the named sized defined in jig's spacing config (e.g. sm, l, xxl, ...)
  16. * @param {Literal|String} [$breakpoint='auto'] - either "auto" (to use the current breakpoint) or one of the defined named breakpoints
  17. * @returns {Number|null} the spacing value or null if nothing was found
  18. * @throws error if size is unknown
  19. *
  20. * @example
  21. * spacing-value(sm)
  22. * => 12px
  23. * spacing-value(md, large)
  24. * => 5rem
  25. */
  26. @function spacing-value($size, $breakpoint:'auto'){
  27. $spacing: map-get($jig---spacing-config, $size);
  28. @if $spacing == null {
  29. @error 'jig:spacing-value | unknown size "#{$size}"';
  30. }
  31. @if type-of($spacing) == 'map' {
  32. @return breakpoint-value($spacing, $breakpoint);
  33. } @else {
  34. @return $spacing;
  35. }
  36. }
  37. /**
  38. * @namespace Spacing:spacing-based-attributes
  39. */
  40. /**
  41. * Define (an) attribute(s) based on breakpoint-dependent spacing values.
  42. * This will render the given attributes with the corresponding spacing values for each defined breakpoint
  43. * in compiled media queries. Since this will result in many media queries being rendered, make sure before,
  44. * that there aren't many other media queries also needed to complete your definition. In that case, it might be
  45. * better and more performant to rather write the queries manually and get the spacing values via `[]` or
  46. * `spacing-value`.
  47. *
  48. * @memberof Spacing:spacing-based-attributes
  49. * @function
  50. * @name spacing-based-attributes
  51. * @alias spacing-based-attributes
  52. *
  53. * @param {Map} $attributes - keys are attribute names, while values are spacing sizes
  54. * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor
  55. * @throws error if size is unknown
  56. *
  57. * @see spacing-based-attribute
  58. *
  59. * @example
  60. * \@include spacing-based-attributes(
  61. * (
  62. * 'padding-top' : 'sm',
  63. * 'padding-right' : 'md',
  64. * 'padding-bottom' : 'sm'
  65. * 'padding-left' : 'md'
  66. * 'margin-top' : 'l',
  67. * 'margin-bottom' : 'xl'
  68. * ),
  69. * 2.0
  70. * );
  71. */
  72. @mixin spacing-based-attributes($attributes, $factor:null){
  73. $spacing-attributes: ();
  74. @each $attribute-name, $attribute-size in $attributes {
  75. $size-definition: map-get($jig---spacing-config, $attribute-size);
  76. @if $size-definition == null {
  77. @error 'jig:spacing-based-attributes | unknown size "#{$size-definition}"';
  78. }
  79. $spacing-attributes: map-merge($spacing-attributes, ($attribute-name : $size-definition));
  80. }
  81. @include attributes-for-breakpoints($spacing-attributes, $factor);
  82. }
  83. /**
  84. * @namespace Spacing:spacing-based-attribute
  85. */
  86. /**
  87. * Define an attribute based on breakpoint-dependent spacing values.
  88. * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,
  89. * if you'll definitely only have one attribute to be defined in multiple breakpoints.
  90. *
  91. * @memberof Spacing:spacing-based-attribute
  92. * @function
  93. * @name spacing-based-attribute
  94. * @alias spacing-based-attribute
  95. *
  96. * @param {String} $attribute - the name of the attribute you want to set
  97. * @param {String} $size - on of the named sized defined in jig's spacing config (sm, l, xxl, ...)
  98. * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor
  99. * @throws error if size is unknown
  100. *
  101. * @see spacing-based-attributes
  102. *
  103. * @example
  104. * \@include spacing-based-attribute(margin-top, 'xl', 1.0);
  105. */
  106. @mixin spacing-based-attribute($attribute, $size, $factor:null){
  107. $attributes: ();
  108. $attributes: map-merge($attributes, ('#{$attribute}' : $size));
  109. @include spacing-based-attributes($attributes, $factor);
  110. }