ctrSetOption¶

Description: The ctrSetOption Stylus invocation sets global ctr options.

Parameters

• ctrSetOption(<option>)
• ctrSetOption(<option>, {<reset>: false, <once>: false, <ctrrc>: true})

Arguments

• <option>
  • Type: Object
  • Desc: The ctr global options to be set
• <once>
  • Type: Boolean | false
  • Desc: Set options to be applied once to the following ctr instance then reverted back to the previous option state
• <reset>
  • Type: Boolean | false
  • Desc: Resets options back to the “base” defined in .ctrrc.yml or to the default options
• <ctrrc>
  • Type: Boolean | true
  • Desc: Overrides the default reset action of resetting back to the “base” disregarding .ctrrc.yml, effectively resetting to the default options

Example

ctrSetOption({
  hover: {
    duration: 2s
    delay: 0.5s
    ease: 'ease-in'
  }
})

ctr('.test', {
  hover: {
    on: {
      width: 400px
    }
    non: {
      width: 200px
    }
  }
})

ctr:::setOption:
  hover:
    duration: 2s
    delay: 0.5s
    ease: ease-in

.test:
  hover:
    on:
      width: 400px
    non:
      width: 200px

.test:hover {
  width: 400px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: width;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  width: 200px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: width;
  transition-timing-function: ease-in;
}

ctrSetOption({
  hover: {
    duration: 2s
    delay: 0.5s
    ease: 'ease-in'
  }
})

ctr('.test', {
  hover: {
    on: {
      width: 400px
    }
    non: {
      width: 200px
    }
  }
})

.test:hover {
  width: 400px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: width;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  width: 200px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: width;
  transition-timing-function: ease-in;
}

ctr:::setOption:
  hover:
    duration: 2s
    delay: 0.5s
    ease: ease-in

.test:
  hover:
    on:
      width: 400px
    non:
      width: 200px

Notes

• Always overwrites previously defined or default options
• In practice, this should not be a replacement for .ctrrc.yml, but meh, sometime I do
• A YAML option Object can be declared through an Object with the key of ctr:::option
• Multiple instances of ctr:::setOption in a YAML file can be achieved through modifier key syntax as such ctr:::setOption:<modifier>:
  • Regex: ^ctr:::setOption

ctrSetVariable¶

Description: The ctrSetVariable Stylus invocation sets global ctr variables.

Parameters

• ctrSetVariable(<variable>)
• ctrSetVariable(<variable>, {<reset>: false, <once>: false, <ctrrc>: true, <overwrite: false>})

Arguments

• <variable>
  • Type: Object
  • Desc: The global ctr variables to be set
• <once>
  • Type: Boolean | false
  • Desc: Set variables to be applied once to the following ctr instance then reverted back to the previous variable state
• <reset>
  • Type: Boolean | false
  • Desc: Resets variables back to the “base” defined in .ctrrc.yml or to an empty Object
• <ctrrc>
  • Type: Boolean | true
  • Desc: Overrides the default reset action of resetting back to the “base” disregarding .ctrrc.yml, effectively resetting to an empty Object
• <overwrite>
  • Type: Boolean | false
  • Desc: Overwrites previously set variables

Example

ctrSetVariable({
  red: #c0392b
  white: #ecf0f1
})

ctr('.test', {
  width: 200px
  color: '$white$'
  background: '$red$'
})

ctr:::setVariable:
  red: '#c0392b'
  white: '#ecf0f1'

.test:
  width: 200px
  color: $white$
  background: $red$

.test {
  width: 200px;
  color: #ecf0f1;
  background: #c0392b;
}

ctrSetVariable({
  red: #c0392b
  white: #ecf0f1
})

ctr('.test', {
  width: 200px
  color: '$white$'
  background: '$red$'
})

.test {
  width: 200px;
  color: #ecf0f1;
  background: #c0392b;
}

ctr:::setVariable:
  red: '#c0392b'
  white: '#ecf0f1'

.test:
  width: 200px
  color: $white$
  background: $red$

Notes

• The intended use of ctr variables is to replace Stylus variables
• YAML syntax: ctr:::setVar:
  • In YAML you can only set the <variable> Object since there is not way to pass the second argument in YAML
• Multiple instances of ctr:::setVariable in a YAML file can be achieved through modifier key syntax as such ctr:::setVariable:<modifier>:
  • Regex: ^ctr:::setVariable
• Alias: ctrSetVar

ctrSetReset¶

Description: The ctrSetReset Stylus invocation resets all values set by other “set” invocations.

Parameters

• ctrSetReset()
• ctrSetReset({<variable>: {}, <option>: {}})

Arguments

• <variable>
  • Type: Object | Boolean
  • Desc: Sets default variables or if the variables should be reset
• <option>
  • Type: Object | Boolean
  • Desc: Sets default options or if the options should be reset

Notes

• Could be useful, but I would shy away unless needed

ctrReset¶

Description: The ctrReset Stylus invocation resets everything.

Parameters

• ctrReset()
• ctrReset({<variable>: {}, <option>: {}})

Arguments

• <variable>
  • Type: Object | Boolean
  • Desc: Sets default variables
• <option>
  • Type: Object | Boolean
  • Desc: Sets default options

Notes

• Somewhat like the nuclear option, I typically use it for debugging purposes or if shit get fucked and I need a new sheet of ice