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.

Edit
// 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

Local Variable

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

Edit
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

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>$_.

Edit
// 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