ApplyTo¶

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

Edit


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.

Edit


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>

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

Edit


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