scss Sass：映射getter&overridding #sass

Posted 2021-05-18

.getter {
  prop-1: "non-raw-prop-1-value";
  prop-2: "raw-prop-2-value";
}

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

// A property map
$properties: (
  prop-1: "raw-prop-1-value",
  prop-2: "raw-prop-2-value"
);

// The getter for the prop-1 property
@function get-prop-1($value) {
  @return 'non-' + $value;
}

// The overridding function that calls a getter
@function get($properties, $key) {
  $getter: "get-" + $key;
  $value : map-get($properties, $key);

  @if (function-exists($getter)) {
    @return call($getter, $value);
  }

  @return $value;
}

// Test
.getter {
  prop-1: get($properties, prop-1);
  prop-2: get($properties, prop-2);
}