Global Variable¶

Description: Variable reference lookup in a <class> defaults to the global variable scope. If no reference is found, the lookup then defers to the local variable scope.

// sets global variable
ctrSetVariable({
  width: 400px
})

ctrSetClass('Box', {
  $$: {
    // overwritten by above global variable
    width: 200px
    height: 400px
  }
  width: '$width$'
  height: '$height$'
})

ctr('.test', {
  extend: 'Box'
})

# sets global variable
ctr:::setVariable:
  width: 400px

ctr:::setClass:Box:
  $$:
    # overwritten by above global variable
    width: 200px
    height: 400px
  width: $width$
  height: $height$

.test:
  extend: Box

.test {
  width: 400px;
  height: 400px;
}

// sets global variable
ctrSetVariable({
  width: 400px
})

ctrSetClass('Box', {
  $$: {
    // overwritten by above global variable
    width: 200px
    height: 400px
  }
  width: '$width$'
  height: '$height$'
})

ctr('.test', {
  extend: 'Box'
})

.test {
  width: 400px;
  height: 400px;
}

# sets global variable
ctr:::setVariable:
  width: 400px

ctr:::setClass:Box:
  $$:
    # overwritten by above global variable
    width: 200px
    height: 400px
  width: $width$
  height: $height$

.test:
  extend: Box

Notes

• The idea behind this behavior is to allow you to structure your classes to inherit set defaults, like primary colors, thus allowing for seamless class reuse between projects
  • Differs from ctr instances which do not inherit global local variables
• Global variables do not overwrite explicit local variables defined in the extend Object
• If this behavior is unwelcomed, you can use local private variables whose value can only be overwritten explicitly and not globally
• Priority: extend variable > private variable > global variable > local variable
• Object lookup is performed through lodash’s _.get Function using dot notation: $<path>.<to>.<var>$

Local Variable¶

Description: If no global variable is found, <class> variable reference lookup defers to the local variable scope.

ctrSetClass('Box', {
  $$: {
    width: '200px'
    height: '400px'
  }
  width: '$width$'
  height: '$height$'
})

ctr('.test', {
  extend: 'Box'
})

ctr:::setClass:Box:
  $$:
    width: 200px
    height: 400px
  width: $width$
  height: $height$

.test:
  extend: Box

.test {
  width: 200px;
  height: 400px;
}

ctrSetClass('Box', {
  $$: {
    width: '200px'
    height: '400px'
  }
  width: '$width$'
  height: '$height$'
})

ctr('.test', {
  extend: 'Box'
})

.test {
  width: 200px;
  height: 400px;
}

ctr:::setClass:Box:
  $$:
    width: 200px
    height: 400px
  width: $width$
  height: $height$

.test:
  extend: Box

Notes

• As I mentioned above in global variable, I recommend you use local variables as more or less default values with the intention of overwriting them with set global variables; if this is not the case, use private variables
• Priority: extend variable > private variable > global variable > local variable
• Object lookup is performed through lodash’s _.get Function using dot notation: $<path>.<to>.<var>$

Private Variable¶

Description: A private variable can not be overwritten by a global variable. The notation for a private variable is denoted by underscores as such: _$<var>$_.

// sets global variable
ctrSetVariable({
  width: 400px
})

ctrSetClass('Box', {
  $$: {
    width: 200px
    height: 400px
  }
  // NOT overwritten by above global variable since private
  width: '_$width$_'
  height: '$height$'
})

ctr('.test', {
  extend: 'Box'
})

# sets global variable
ctr:::setVariable:
  width: 400px

ctr:::setClass:Box:
  $$:
    width: 200px
    height: 400px
  # NOT overwritten by above global variable since private
  width: _$width$_
  height: $height$

.test:
  extend: Box

.test {
  width: 200px;
  height: 400px;
}

// sets global variable
ctrSetVariable({
  width: 400px
})

ctrSetClass('Box', {
  $$: {
    width: 200px
    height: 400px
  }
  // NOT overwritten by above global variable since private
  width: '_$width$_'
  height: '$height$'
})

ctr('.test', {
  extend: 'Box'
})

.test {
  width: 200px;
  height: 400px;
}

# sets global variable
ctr:::setVariable:
  width: 400px

ctr:::setClass:Box:
  $$:
    width: 200px
    height: 400px
  # NOT overwritten by above global variable since private
  width: _$width$_
  height: $height$

.test:
  extend: Box

Notes

• Regex match: /_\$([^ \s]*?)\$_/
• The idea behind this behavior is to allow you to create classes whose values have a single source of truth, which is ideal for classes you wish to release for public consumption (or if you work with a bunch of yahoos)
• A private variable can still be overwritten explicitly through an extend Object
• Priority: extend variable > private variable > global variable > local variable
• Object lookup is performed through lodash’s _.get Function using dot notation: $<path>.<to>.<var>$