feat(class): add variant sub module, and class.content() function…

… and examples/spec.

class/_class.content.mixin.scss

@@ -0,0 +1,41 @@
+// Sass.
+@use 'sass:meta';
+
+// Modules.
+@use '../function';
+
+// Functions.
+@use '../selector/selector.class.function' as *;
+
+// Status: DONE
+// The `class.content()` mixin sets class selector `$class` with optional `$pseudo-class`, translated with `$dictionary`.
+// @param `$class` Class selector to put `@content` inside.
+// @param `$pseudo-class` Pseudo class for `$class` selector.
+// @param `$dictionary` Dictionary for `$class` selector.
+// @param `$function` Function to set `$class` selector.
+@mixin content(
+  $class,
+  $pseudo-class: (),
+  $dictionary: (),
+  $function: meta.get-function(class)
+) {
+  #{meta.call($function, $class, $pseudo-class, $dictionary)} {
+    @content;
+  }
+}
+
+// Examples.
+// @include content(disabled) { cursor: crosshair; } // .disabled { cursor: crosshair; }
+
+// pseudo-class
+// @include content(disabled, ':hover') { cursor: crosshair; } // .disabled:hover { cursor: crosshair; }
+
+// dictionary
+// @include content(disabled, ':hover', (disabled: d)) { cursor: crosshair; } // .d:hover { cursor: crosshair; }
+
+// multiple classes
+// @include content(((disabled, pagination disabled),), ':hover') { cursor: crosshair; } // .disabled:hover, .pagination-disabled:hover { cursor: crosshair; }
+// @include content(((disabled, pagination disabled, ),), (':hover', ':visited')) { cursor: crosshair; }
+// .disabled:hover, .disabled:visited, .pagination-disabled:hover, .pagination-disabled:visited {
+//   cursor: crosshair;
+// }

class/_class.parent-first.function.scss

@@ -3,6 +3,7 @@
 @use '../string';
 
 // Status: DONE
+// The `class.parent-first()` function returns `$name` with parent selector & as first.
 // @param `$name` The `$name` of string or list type to move parent selector as first.
 // @returns The returned value is `$name` with parent selector as first.
 @function parent-first($name) {

class/_class.spec.scss

@@ -0,0 +1,19 @@
+// Modules.
+@use '../class';
+
+// Examples / Spec.
+@debug class.name('.' border width lg); // .borderwidthlg
+
+
+@include class.content(disabled) { cursor: crosshair; } // .disabled { cursor: crosshair; }
+
+// @include class.variant((padding: unit 1)) using($property, $value) {
+//   #{$property}: #{$value};
+// }
+
+// @include class.variant-combine((padding: unit 1)) using($property, $value) {
+//   @debug $property; // padding
+//   @debug $value; // unit 1
+
+//   #{$property}: #{$value};
+// }

class/_index.scss

@@ -2,11 +2,12 @@
 @forward 'class.variables';
 
 // Mixins.
-// @forward 'class.content.mixin';
+@forward 'class.content.mixin';
 
 // Functions.
 @forward 'class.name.function';
 @forward 'class.parent-first.function';
 
 // Directory.
-// @forward 'variant';
+@forward 'variant' as variant-*;
+@forward 'variant/variant.mixin';

class/variant/_index.scss

@@ -0,0 +1 @@
+@forward 'variant.combine.mixin';

class/variant/_variant.combine.mixin.scss

@@ -0,0 +1,71 @@
+// Sass.
+@use 'sass:list';
+@use 'sass:meta';
+
+// Functions.
+@use '../../selector/selector.class.function' as *;
+@use '../../values/values.combine.function' as *;
+
+// Status: REVIEW:
+// The `variant.combine()` mixin.
+// @param `$variant`
+// @param `$pseudo-class`
+// @param `$dictionary`
+@mixin combine(
+  $variant,
+  $pseudo-class: (),
+  $dictionary: (),
+  $function: meta.get-function(class)
+) {
+  @if type-of($variant) == map {
+    @each $class, $attribute-value in $variant {
+      $-class: ();
+      @if type-of($attribute-value) == map {
+        @each $attribute, $value in $attribute-value {
+          @if type-of($value) == map {
+            @each $value-class, $value in $value {
+              $-class: ();
+              $-value-class: ();
+              @each $class in if(list.separator($class) == comma, $class, ($class,)) {
+                @each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
+                  $-value-class: $value-class;
+                  @each $value-class in if(list.separator($value-class) == comma, $value-class, ($value-class,)) {
+                    $-class: list.append($-class, meta.call($function, combine((method: join), if(&, '&', ()), $class, $attribute, $value-class), $pseudo-class, $dictionary), $separator: comma);
+                  }
+                }
+              }
+
+              #{$-class} {
+                @content($class, $attribute, $-value-class, $value);
+              }
+            }
+          } @else {
+            @each $value in $value {
+              $-class: ();
+              @each $class in if(list.separator($class) == comma, $class, ($class,)) {
+                @each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
+                  $-class: list.append($-class, meta.call($function, combine((method: join), if(&, '&', ()), $class, $attribute), $pseudo-class, $dictionary), $separator: comma);
+                }
+              }
+            }
+
+            #{$-class} {
+              @content($class, $attribute, $value);
+            }
+          }
+        }
+      } @else {
+        @each $value in $attribute-value {
+          $-class: ();
+          @each $class in if(list.separator($class) == comma, $class, ($class,)) {
+            $-class: list.append($-class, meta.call($function, combine((method: join), if(&, '&', ()), $class), $pseudo-class, $dictionary), $separator: comma);
+          }
+        }
+
+        #{$-class} {
+          @content($class, $attribute-value);
+        }
+      }
+    }
+  }
+}

class/variant/_variant.combine.mixin.spec.scss

@@ -0,0 +1,151 @@
+// Mixins.
+@use 'class.variant-combine.mixin' as *;
+
+// Examples.
+// @include variant-combine((padding: unit 1)) using($property, $value) {
+//   @debug $property; // padding
+//   @debug $value; // unit 1
+
+//   #{$property}: #{$value};
+// }
+// .padding {
+//   padding: unit 1;
+// }
+
+// @include variant-combine((padding: (unit 1 unit 2))) using($property, $value) {
+//   @debug $property; // padding
+//   @debug $value; // unit 1 unit 2
+
+//   padding: #{$value};
+// }
+// .padding {
+//   padding: unit 1 unit 2;
+// }
+
+// @include variant-combine((padding: (unit 1, unit 2))) using($property, $value) {
+//   @debug $property; // padding
+//   @debug $value; // unit 1, unit 2
+
+//   #{$property}: #{$value};
+// }
+// .padding {
+//   padding: unit 1, unit 2;
+// }
+
+// @include variant-combine((padding large: unit 1)) using($property, $value) {
+//   @debug $property; // padding large
+//   @debug $value; // unit 1
+
+//   padding: #{$value};
+// }
+// .padding-large {
+//   padding: unit 1;
+// }
+
+// @include variant-combine((padding (small, large): unit 1)) using($property, $value) {
+//   @debug $property; // padding (small, large)
+//   @debug $value; // unit 1
+
+//   padding: #{$value};
+// }
+// .padding-small, .padding-large {
+//   padding: unit 1;
+// }
+
+// @include variant-combine(((outline, inline) padding: unit 1)) using($property, $value) {
+//   @debug $property; // (outline, inline) padding
+//   @debug $value; // unit 1
+
+//   padding: #{$value};
+// }
+// .outline-padding, .inline-padding {
+//   padding: unit 1;
+// }
+
+// @include variant-combine((padding: (size one: unit 1))) using($property, $value-class, $value) {
+//   #{$property}: #{$value};
+// }
+// .padding-size-one {
+//   padding: unit 1;
+// }
+
+// @include variant-combine((border: ((top left, top right): unit 1))) using($property, $side, $value) {
+//   @debug $property; // padding
+//   @debug $side; // top left, top right
+//   @debug $value; // unit 1
+
+//   #{$property}: #{$value};
+// }
+// .border-top-left, .border-top-right {
+//   border: unit 1;
+// }
+
+// @include variant-combine((padding: ((top, bottom): unit 1))) using($property, $value-class, $value) {
+//   #{$property}: #{$value};
+// }
+// .padding-top, .padding-bottom {
+//   padding: unit 1;
+// }
+
+// @include variant-combine(((margin, padding): ((left, right): 0))) using($property, $side, $value) {
+//   @each $property in $property {
+//     #{$property}: #{$value};
+//   }
+// }
+// .margin-left, .margin-right, .padding-left, .padding-right {
+//   margin: 0;
+//   padding: 0;
+// }
+
+// @include variant-combine(((margin, padding): ((left): 0))) using($property, $side, $value) {
+//   @each $property in $property {
+//     #{$property}: #{$value};
+//   }
+// }
+// .margin-left, .padding-left {
+//   margin: 0;
+//   padding: 0;
+// }
+
+// @include variant-combine((margin: ((left, right): (0: 0)))) using($property, $side, $value-class, $value) {
+//   @debug $property; // margin
+//   @debug $side; // left, right
+//   @debug $value-class; // 0
+//   @debug $value; // 0
+
+//   cursor: grab;
+// }
+// .margin-left-0, .margin-right-0 {
+//   cursor: grab;
+// }
+
+// @include variant-combine(((margin, padding): ((left, right): ((xs, xl): 0)))) using($property, $side, $value-class, $value) {
+//   @debug $property; // margin, padding
+//   @debug $side; // left, right
+//   @debug $value-class; // xs, xl
+//   @debug $value; // 0
+
+//   margin: 0;
+// }
+// .margin-left-xs, .margin-left-xl, .margin-right-xs, .margin-right-xl, .padding-left-xs, .padding-left-xl, .padding-right-xs, .padding-right-xl {
+//   margin: 0;
+// }
+
+// @include variant-combine((padding: ((top, bottom): ((size one, size two): unit 1, size two: unit 2)))) using($property, $side, $value-class, $value) {
+//   font: 100;
+// }
+
+// @include variant-combine(((padding, margin): ((top, right, bottom, left): (size one: unit 1)))) using($property, $side, $value-class, $value) {
+//   padding: #{$value};
+// }
+
+// @include variant-combine(((padding, border): ((right bottom, left top, ): (2: unit 2, 3: unit 3)))) using($resolved...) {
+//   @debug $resolved;
+//   font-size: 1;
+// }
+// .padding-right-bottom-2, .padding-left-top-2, .border-right-bottom-2, .border-left-top-2 {
+//   font-size: 1;
+// }
+// .padding-right-bottom-3, .padding-left-top-3, .border-right-bottom-3, .border-left-top-3 {
+//   font-size: 1;
+// }