Source: spacing.scss

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