scss Sass：创建新范围和实例变量/方法#sass

Posted 2021-05-18

.instance {
  property: 1;
}

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

// Sass: Creating new scope & instance variable/method in Sass
//
// Other ideas: https://github.com/whizark/xass#ideas

// This is pseudo code

// The FILO stack to keep scope & the property values
$-scope: (
  //  <scope-id>: (
  //    <name>: <value>,
  //    ...
  // ),
  // ...
);

// Setter function
@function set($name, $value) {
  // 1. Get the $-scope value by current scope ID
  // 2. Set the $value to the $name property in the current scope
  // 3. Merge back the value(1) to $-scope

  @return $value;
}

// Getter function
@function get($name) {
  $value: null;

  // 1. Get the $-scope value by current scope ID
  // 2. Get the value of $name property

  @return $value;
}

// The mixin to create new scope
@mixin new() {
  // 1. Create a new scope ID
  // 2. Push the scope ID and empty Map into $-scope

  // 3. Do something
  // e.g. call constructor function by using call()
  //      or set default values       etc.

  @content;

  // 4. Pop the current scope ID and Map(2) from $-scope
}

// Component Definition
@function method ($arg) {
  $value: null;

  // 1. Get property value(s)
  $value: get('property');

  // 2. Do something
  $value: $arg;

  @return $value;
}

// Use case
.instance {
  // 1. Create new scope.
  @include new() {
    // Scope begins
    
    // Set property
    $property: set('property', 1);

    // Call a method
    $value: method(1);
    
    property: $value;

    // Scope ends
  }
}