scss Sass：带描述符的类型值。 #sass

Posted 2021-05-18

/* @todo implements */

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

// Sass: Typed value with the descriptor.
//
// Typed value factory & validator using Map
// https://gist.github.com/whizark/b42f5d52c3caa2ad5f43
//
// Other ideas
// https://github.com/whizark/xass#ideas 

// THIS IS JUST PSEUDO-CODE FOR THE INTERFACE.

// The storage for types.
//
// (
//   <type-name>: (
//     factory: null,
//     getter: null,
//     setter: null,
//     validator: null
//   ),
//   ...
// )
$-types: ();

// Registers a type with the descriptor.
//
// @param {String} $type - The type name
// @param {Map} $descriptor - The type descriptor
//                            (
//                              factory: '<factory-function-name>',
//                              getter: '<getter-function-name>',
//                              setter: '<setter-function-name>',
//                              validator: '<validato-function-name>'
//                            )
@mixin register-type($type, $descriptor: ()) { /* @todo implements */ }

// Creates a value of a type.
//
// Validator, factory of the type is internally called by `call()`.
//
// @param {String} $type - The type name
// @param {*} $value - The value
//
// @return {Map} The typed-value
//               (
//                 -type: '<type-name>',
//                 -value: '<value>'
//               )
@function new($type, $value) { /* @todo implements */ @return null; }

// Returns the value of a typed-value.
//
// @param {Map} $typed-value - The typed-value
//                             (
//                               -type: '<type-name>',
//                               -value: '<value>'
//                             )
//
// @return {*} The value of `-value`
@function value-of($typed-value) { /* @todo implements */ @return null; }

// Sets a value to a typed-value.
//
// Validator of the type is internally called by `call()`.
//
// @param {Map} $typed-value - The typed-value
//                             (
//                               -type: '<type-name>',
//                               -value: '<value>'
//                             )
// @param {*} $value - The value
//
// @return {Map} The typed-value
//               (
//                 -type: '<type-name>',
//                 -value: '<value>'
//               )
@function set($typed-value, $value) { /* @todo implements */ @return null; }



// Use case
// Registers 'direction' type with the validator.
@include register-type(
  // Type name
  'direction',
  // Type descriptor.
  (
      factory: null,
      getter: null,
      setter: null,
      validator: 'validate-direction'  // The function name of the validator
  )
);

// The typed-value validator for 'direction'.
//
// The validator is automatically called from factory, setter.
//
// @param {*} $value - The value to validate
//
// @return {Bool} True if it is valid, a message otherwise.
@function validate-direction($value) {
    @if not type-of($value) != 'string' {
      // Returns a message if it isn't valid.
      @return 'The Direction `#{$value}` should be a String.';
    }

    $index: index(('left', 'right'), $value);

    @if $index == null {
      @return 'The Direction `#{$value}` should be `left` or `right`.';
    }

    // Returns True if it is valid.
    @return true;
}

// A helper function to check the value is valid.
//
// @param {*} $value - The value to check
//
// @return {Bool} True if it is valid, false otherwise.
@function is-direction($value) {
  @return validate-direction($value) == true;
}



// Client code
.test {
  // Creates a Direction value that is actually a Map.
  //
  // (
  //   -type : 'direction',
  //   -value: 'left'
  // )
  //
  // new() internally calls the Validator & Factory of Direction type.
  $direction: new('direction', 'left');

  // Gets the value of $direction.
  //
  // value-of() internally calls the getter of Direction Type
  // and returns the value from -value.
  float: value-of($direction);  // Returns 'left'.

  // Sets another Direction value.
  //
  // set() internally calls the validator & setter of Direction type
  // and sets the value to -value.
  $direction: set($direction, 'right');
}