ApplyTo¶

Description: An applyTo key-value pair can be defined within the option Object to apply a specified value to the scoped declaration.

ctr('.test', {
  option: {
    applyTo: 'span'
  }
  width: 200px
})

.test:
  option:
    applyTo: span
  width: 200px

.test span {
  width: 200px;
}

ctr('.test', {
  option: {
    applyTo: 'span'
  }
  width: 200px
})

.test span {
  width: 200px;
}

.test:
  option:
    applyTo: span
  width: 200px

Notes

• applyTo differs from appendTo in that there is a space in between the scoped level value and the applyTo value
  • applyTo <.level> <applyTo>
  • appendTo <.level><appendTo>

AppendTo¶

Description: An appendTo key-value pair can be defined within the option Object to append a specified value to the scoped declaration.

ctr('.test', {
  option: {
    appendTo: '.appendToClass'
  }
  width: 200px
})

.test:
  option:
    appendTo: .appendToClass
  width: 200px

.test.appendToClass {
  width: 200px;
}

ctr('.test', {
  option: {
    appendTo: '.appendToClass'
  }
  width: 200px
})

.test.appendToClass {
  width: 200px;
}

.test:
  option:
    appendTo: .appendToClass
  width: 200px

Notes

• appendTo differs from applyTo in that there is no space in between the scoped level value and the appendTo value
  • appendTo <.level><appendTo>
  • applyTo <.level> <applyTo>

Override¶

Description: An override key-value pair can be defined within the option Object to replace the entire scoped declaration.

ctr('.test', {
  option: {
    override: '#override'
  }
  width: 200px
})

.test:
  option:
    override: '#override'
  width: 200px

#override {
  width: 200px;
}

ctr('.test', {
  option: {
    override: '#override'
  }
  width: 200px
})

#override {
  width: 200px;
}

.test:
  option:
    override: '#override'
  width: 200px

Notes

• Due to the nature of Stylus, this feature only truly works with the declarative ctr instance