mostly filebased Content Presentation System
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

_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. }