refactor(property): add handle arguments to use var.get() dictionary.

property/_property.mixin.scss

@@ -32,7 +32,8 @@
   $separator: null,
   $type-function: null,
   $functions: null,
-  $execute: true
+  $execute: true,
+  $arguments: null
 ) {
   $type-function: if($type-function, $type-function, variables.$type-function);
   @each $name, $attribute-value in $property {
@@ -47,7 +48,8 @@
               $separator,
               $type-function,
               $functions,
-              $execute
+              $execute,
+              $arguments
             );
           }
         } @else {
@@ -58,7 +60,8 @@
             $separator,
             $type-function,
             $functions,
-            $execute
+            $execute,
+            $arguments
           );
         }
       }
@@ -70,7 +73,8 @@
         $separator,
         $type-function,
         $functions,
-        $execute
+        $execute,
+        $arguments
       );
     }
   }

property/_property.mixin.spec.scss

@@ -108,4 +108,18 @@ var.$var: map.merge(var.$var, (prefix: s, delimiter: '-'));
 
   // @include property.property(((margin, padding): ((top: 1px), 2px, (left: 4px), unit 1)));
   // @include property.property(((border, margin): ((top, right): (unit 1, unit 2))));
+
+  // pass dictionary inside `$arguments`
+  // @include property.property(((border, margin): ((top, right): ((unit 1) (), unit 2))), $arguments: (dictionary: (unit: u)));
+  // border-top: calc(var(--s-u) + 1), unit 2;
+  // border-right: calc(var(--s-u) + 1), unit 2;
+  // margin-top: calc(var(--s-u) + 1), unit 2;
+  // margin-right: calc(var(--s-u) + 1), unit 2;
+
+  // pass adjust inside `$arguments`
+  // @include property.property(((border, margin): ((top, right): ((unit 1) 1px, unit 2))), $arguments: (true, 100px, (unit: u)));
+  // border-top: calc(var(--s-u, 100px) * 1rem + 1) 1px, unit 2;
+  // border-right: calc(var(--s-u, 100px) * 1rem + 1) 1px, unit 2;
+  // margin-top: calc(var(--s-u, 100px) * 1rem + 1) 1px, unit 2;
+  // margin-right: calc(var(--s-u, 100px) * 1rem + 1) 1px, unit 2;
 // }

property/_property.set.mixin.scss

@@ -16,20 +16,26 @@
 @use 'property.value.function' as *;
 
 // Status: DONE
-// The `property.set()` mixin sets property or properties by using .
-// @param `$property-value` The property of map type to set.
-// @param `$important` Indicates property is important.
-// @param `$function` The function to invoke on arguments.
-// @param `$list` Indicates to call list.
-// @param `$invoke` A bool value indicates whether to invoke `$function`.
+// The `property.set()` mixin sets property or properties by providing `map` type value, with ability to call `$functions` on specific types in value.
+// @param `$name-value` The property of map type to set.
+// @param `$important` Indicates whether property is important.
+// @param `$prefix` Prefix(es) of the function name defined in value and/or `$type-function` that are used to call them on types in value.
+// @param `$separator` Separator(s) of the function name defined in value and/or `$type-function`.
+// @param `$type-function` A map of (type: function) to determine which types are to be invoked in value.
+// @param `$functions` Additional functions that can be called in value.
+// @param `$execute` Whether to execute calling functions in value.
+// @param `$arguments` Additional arguments of `list` or `map` type to pass into called functions.
 @mixin set(
+  // property
   $name-value,
   $important: false,
+  // function to call
   $prefix: null,
   $separator: null,
   $type-function: null,
   $functions: null,
-  $execute: true
+  $execute: true,
+  $arguments: null
 ) {
   $type-function: if($type-function, $type-function, variables.$type-function);
   @each $name, $value in $name-value {
@@ -40,7 +46,7 @@
 
     // Set property.
     @each $name in name($name) {
-      #{$name}: value($value, $important, $prefix, $separator, $type-function, $functions, $execute);
+      #{$name}: value($value, $important, $prefix, $separator, $type-function, $functions, $execute, $arguments);
     }
   }
 }

property/_property.set.mixin.spec.scss

@@ -114,4 +114,18 @@ var.$var: map.merge(var.$var, (prefix: s, delimiter: '-'));
   // FEATURE: (property: value, value)
   // @include property.set((box shadow: (3px 3px (--var-get red), -1em 0 0.4em olive)));
   // box-shadow: 3px 3px var(--s-red), -1em 0 0.4em olive;
+
+  // FEATURE: dictionary
+  // @include property.set((box shadow: (3px 3px (--var-get ('orange', (args: (dictionary: ('orange': o))))), -1em 0 0.4em olive)));
+  // @include property.set((box shadow: (3px 3px (--var-get 'orange'), -1em 0 0.4em olive)), $arguments: (dictionary: ('orange': o)));
 // }
+
+// Way of passing arguments
+// @function test($param1: null, $param2: null, $param3: null, $dictionary: null) {
+//   @debug $dictionary;
+
+//   @return null;
+// }
+
+// @debug test((param1: first, param2: second, param3: third)...);
+// @debug test(first, second, (dictionary: third, param333: a, param3: second)...);

property/_property.value.function.scss

@@ -12,29 +12,34 @@
 
 // Status: DONE
 // The `property.value()` function creates property value with some types called by function defined in `$type-function`.
-// @param `$value` Property value that some types in it can be called by functions defined in `$type-function`.
-// @param `$important` Indicates whether value is important.
-// @param `$prefix` Prefixes of the function defined in `$type-function` that are used to call types.
-// @param `$separator` Separators of the function defined  in `$type-function`.
-// @param `$type-function` The function to invoke on arguments.
-// @param `$functions` Additional functions to call types in `$value`.
-// @returns The returned value is property value with some types called by functions defined in `$type-function`.
+// @param `$value` A property value in which some types in it can be called by functions defined in `$type-function`.
+// @param `$important` Indicates whether `$value` is important.
+// @param `$prefix` Prefix(es) of the function name defined in `$value` and/or `$type-function` that are used to call them on types in `$value`.
+// @param `$separator` Separator(s) of the function name defined in `$value` and/or `$type-function`.
+// @param `$type-function` A map of (type: function) to determine which types are to be invoked in `$value`.
+// @param `$functions` Additional functions that can be called in `$value`.
+// @param `$execute` Whether to execute calling functions in `$value`.
+// @param `$arguments` Additional arguments of `list` or `map` type to pass into called functions.
+// @returns The returned value is property value with some types replaced by called functions defined in `$type-function`.
 @function value(
+  // value
   $value,
   $important: false,
+  // function
   $prefix: null,
   $separator: null,
   $type-function: null,
   $functions: null,
-  $execute: true
+  $execute: true,
+  $arguments: null,
 ) {
   $type-function: if($type-function, $type-function, variables.$type-function);
   @if $type-function {
     $i: 1;
     @each $-value in if(list.separator($value) == comma, $value, ($value,)) {
       $-value: function.call-by-list(
         function.insert($-value, $prefix, $separator, $type-function, $functions),
-        $prefix, $separator, $functions, $execute
+        $prefix, $separator, $functions, $execute, $arguments
       );
       @if list.separator($value) == comma {
         $value: list.set-nth($value, $i, $-value);

property/_property.value.function.spec.scss

@@ -0,0 +1,15 @@
+// Sass.
+@use 'sass:map';
+@use 'sass:meta';
+
+// Modules.
+@use '../function';
+@use '../property';
+@use '../var';
+
+function.$functions: map.merge(function.$functions, (var: meta.module-functions(var)));
+property.$type-function: map.merge(property.$type-function, (list: --var-get));
+
+// @debug property.value((unit 5, 1px, false), false);
+// @debug property.value((2px solid (unit 10, (arguments: (dictionary: (unit: u)))), a));
+// @debug property.value(((unit 10, (arguments: (dictionary: (unit: u)))) (), a));

property/_property.variant.mixin.scss

@@ -6,7 +6,7 @@
 @use 'property.variables' as variables;
 
 // Functions.
-@use 'property.set.mixin' as property;
+@use 'property.set.mixin';
 
 // Modules.
 @use '../class';
@@ -15,24 +15,33 @@
 
 // Status: DONE
 // Property `property.variant()` mixin sets property variant.
-// @param `$variant` Variant of map type to set.
-// @param `$important` Indicates property is important.
-// @param `$pseudo-class` Pseudo class for `$variant`.
-// @param `$dictionary` Dictionary to translate class `$variant`.
+// @param `$variant` Property variant of `map` type to set. (See examples for map structure)
+// @param `$important` Indicates property is `important`.
+// @param `$pseudo-class` Pseudo class for class selector in `$variant`.
+// @param `$dictionary` Dictionary to translate class selector and passed as (dictionary arguments) for called functions.
 // @param `$class-function` Function to set class selector.
-// @param `$functions` Functions to use to call on property values.
-// @param `$execute` Execute `property.property()` function.
+// @param `$prefix` Prefix(es) of the function name defined in value and/or `$type-function` that are used to call them on types in value.
+// @param `$separator` Separator(s) of the function name defined in value and/or `$type-function`.
+// @param `$type-function` A map of (type: function) to determine which types are to be invoked in property value.
+// @param `$functions` Functions instead of global that can be called on property values.
+// @param `$execute` Whether to execute `property.set()` function.
+// // @param `$arguments` Additional arguments of `list` or `map` type to pass into called functions.
 @mixin variant(
+  // class, property
   $variant: (),
   $important: null,
+  // class
   $pseudo-class: (),
-  $dictionary: (),
+  // class, value
+  $dictionary: null,
+  // class
   $class-function: meta.get-function(class, false, selector),
+  // function
   $prefix: null,
   $separator: null,
   $type-function: null,
   $functions:null,
-  $execute: true
+  $execute: true,
 ) {
   @if type-of($variant) == map {
     $type-function: if($type-function, $type-function, variables.$type-function);
@@ -46,7 +55,8 @@
             $separator,
             $type-function,
             $functions,
-            $execute
+            $execute,
+            $dictionary
           );
         }
       } @else {
@@ -57,7 +67,8 @@
           $separator,
           $type-function,
           $functions,
-          $execute
+          $execute,
+          $dictionary
         );
       }
     }

property/_property.variant.mixin.spec.scss

@@ -19,7 +19,6 @@ function.$functions: map.merge(function.$functions, (
 
 property.$type-function: map.merge(property.$type-function, (list: --var-get));
 
-
 // Examples.
 // FEATURE: single variant: (property/class: class/value)
 // @include variant((float: right)); // TODO: use `variant.create()`