mostly filebased Content Presentation System
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

_syntax-helpers.scss 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /// Syntax Utilities for Extending Susy
  2. /// ===================================
  3. /// There are many steps involved
  4. /// when translating between the Susy syntax layer,
  5. /// and the Su core math.
  6. /// That entire process can be condensed with these two functions.
  7. /// For anyone that wants to access the full power of Susy,
  8. /// and build their own plugins, functions, or mixins –
  9. /// this is the primary API for compiling user input,
  10. /// and accessing the core math.
  11. ///
  12. /// This is the same technique we use internally,
  13. /// to keep our API layer simple and light-weight.
  14. /// Every function accepts two arguments,
  15. /// a "shorthand" description of the span or context,
  16. /// and an optional settings-map to override global defaults.
  17. ///
  18. /// - Use `susy-compile()` to parse, merge, and normalize
  19. /// all the user settings into a single map.
  20. /// - Then use `su-call()` to call one of the core math functions,
  21. /// with whatever data is needed for that function.
  22. ///
  23. /// @group plugin-utils
  24. /// @see susy-compile
  25. /// @see su-call
  26. ///
  27. /// @example scss - Susy API `gutter` function
  28. /// @function susy-gutter(
  29. /// $context: susy-get('columns'),
  30. /// $config: ()
  31. /// ) {
  32. /// // compile and normalize all user arguments and global settings
  33. /// $context: susy-compile($context, $config, 'context-only');
  34. /// // call `su-gutter` with the appropriate data
  35. /// @return su-call('su-gutter', $context);
  36. /// }
  37. ///
  38. /// @example scss - Sample `span` mixin for floated grids
  39. /// @mixin span(
  40. /// $span,
  41. /// $config: ()
  42. /// ) {
  43. /// $context: susy-compile($span, $config);
  44. /// width: su-call('su-span', $context);
  45. ///
  46. /// @if index($span, 'last') {
  47. /// float: right;
  48. /// } @else {
  49. /// float: left;
  50. /// margin-right: su-call('su-gutter', $context);
  51. /// }
  52. /// }
  53. // Compile
  54. // -------
  55. /// Susy's syntax layer has various moving parts,
  56. /// with syntax-parsing for the grid/span shorthand,
  57. /// and normalization for each of the resulting values.
  58. /// The compile function rolls this all together
  59. /// in a single call –
  60. /// for quick access from our internal API functions,
  61. /// or any additional functions and mixins you add to your project.
  62. /// Pass user input and configuration maps to the compiler,
  63. /// and it will hand back a map of values ready for Su.
  64. /// Combine this with the `su-call` function
  65. /// to quickly parse, normalize, and process grid calculations.
  66. ///
  67. /// @group plugin-utils
  68. /// @see su-call
  69. ///
  70. /// @param {list | map} $shorthand -
  71. /// Shorthand expression to define the width of the span,
  72. /// optionally containing:
  73. /// - a count, length, or column-list span;
  74. /// - `at $n`, `first`, or `last` location on asymmetrical grids;
  75. /// - `narrow`, `wide`, or `wider` for optionally spreading
  76. /// across adjacent gutters;
  77. /// - `of $n <spread>` for available grid columns
  78. /// and spread of the container
  79. /// (span counts like `of 6` are only valid
  80. /// in the context of symmetrical grids);
  81. /// - and `set-gutters $n` to override global gutter settings
  82. /// @param {map} $config [null] -
  83. /// Optional map of Susy grid configuration settings
  84. /// @param {bool} $context-only [false] -
  85. /// Allow the parser to ignore span and span-spread values,
  86. /// only parsing context and container-spread
  87. ///
  88. /// @return {map} -
  89. /// Parsed and normalized map of settings,
  90. /// based on global and local configuration,
  91. /// alongwith shorthad adjustments.
  92. ///
  93. /// @example scss -
  94. /// $user-input: 3 wide of susy-repeat(6, 120px) set-gutters 10px;
  95. /// $grid-data: susy-compile($user-input, $susy);
  96. ///
  97. /// @each $key, $value in $grid-data {
  98. /// /* #{$key}: #{$value}, */
  99. /// }
  100. @function susy-compile(
  101. $short,
  102. $config: null,
  103. $context-only: false
  104. ) {
  105. // Get and normalize config
  106. $config: if($config, susy-settings($config), susy-settings());
  107. $normal-config: susy-normalize($config);
  108. // Parse and normalize shorthand
  109. @if (type-of($short) != 'map') and (length($short) > 0) {
  110. $short: susy-parse($short, $context-only);
  111. }
  112. $normal-short: susy-normalize($short, $normal-config);
  113. // Merge and return
  114. @return map-merge($normal-config, $normal-short);
  115. }
  116. // Call
  117. // ----
  118. /// The Susy parsing and normalization process
  119. /// results in a map of configuration settings,
  120. /// much like the global `$susy` settings map.
  121. /// In order to pass that information along to Su math functions,
  122. /// the proper values have to be picked out,
  123. /// and converted to arguments.
  124. ///
  125. /// The `su-call` function streamlines that process,
  126. /// weeding out the unnecessary data,
  127. /// and passing the rest along to Su in the proper format.
  128. /// Combine this with `susy-compile` to quickly parse,
  129. /// normalize, and process grid calculations.
  130. ///
  131. /// @group plugin-utils
  132. ///
  133. /// @require su-span
  134. /// @require su-gutter
  135. /// @require su-slice
  136. /// @see susy-compile
  137. ///
  138. /// @param {'su-span' | 'su-gutter' | 'su-slice'} $name -
  139. /// Name of the Su math function to call.
  140. /// @param {map} $config -
  141. /// Parsed and normalized map of Susy configuration settings
  142. /// to use for math-function arguments.
  143. ///
  144. /// @return {*} -
  145. /// Results of the function being called.
  146. ///
  147. /// @example scss -
  148. /// $user-input: 3 wide of susy-repeat(6, 120px) set-gutters 10px;
  149. /// $grid-data: susy-compile($user-input, $susy);
  150. ///
  151. /// .su-span {
  152. /// width: su-call('su-span', $grid-data);
  153. /// }
  154. @function su-call(
  155. $name,
  156. $config
  157. ) {
  158. $grid-function-args: (
  159. 'su-span': ('span', 'columns', 'gutters', 'spread', 'container-spread', 'location'),
  160. 'su-gutter': ('columns', 'gutters', 'container-spread'),
  161. 'su-slice': ('span', 'columns', 'location'),
  162. );
  163. $args: map-get($grid-function-args, $name);
  164. @if not $args {
  165. $options: 'Try one of these: #{map-keys($grid-function-args)}';
  166. @return _susy-error(
  167. '#{$name} is not a public Su function. #{$options}',
  168. 'su-call');
  169. }
  170. $call: if(function-exists('get-function'), get-function($name), $name);
  171. $output: ();
  172. @each $arg in $args {
  173. $value: map-get($config, $arg);
  174. $output: if($value, map-merge($output, ($arg: $value)), $output);
  175. }
  176. @return call($call, $output...);
  177. }