ApplyTo¶

Description: The applyTo option property applies its value to the <identifier>.

ctr('.test', {
  width: 200px
  non: {
    option: {
      key: '.thisClass'
      applyTo: '.applyTo'
    }
    font-size: 20px
  }
})

.test:
  width: 200px
  non:
    option:
      key: .thisClass
      applyTo: .applyTo
    font-size: 20px

.test {
  width: 200px;
}
.test:not(.thisClass) .applyTo {
  font-size: 20px;
}

ctr('.test', {
  width: 200px
  non: {
    option: {
      key: '.thisClass'
      applyTo: '.applyTo'
    }
    font-size: 20px
  }
})

.test {
  width: 200px;
}
.test:not(.thisClass) .applyTo {
  font-size: 20px;
}

.test:
  width: 200px
  non:
    option:
      key: .thisClass
      applyTo: .applyTo
    font-size: 20px

Notes

• The applyTo property differs from the appendTo property in that there is space between the <identifier> and the applyTo value
  • applyTo <identifier> <applyTo>
  • appendTo <identifier><appendTo>

AppendTo¶

Description: The appendTo option property appends its value to the <identifier>.

ctr('.test', {
  width: 200px
  non: {
    option: {
      key: '.thisClass'
      appendTo: '.appendTo'
    }
    font-size: 20px
  }
})

.test:
  width: 200px
  non:
    option:
      key: .thisClass
      appendTo: .appendTo
    font-size: 20px

.test {
  width: 200px;
}
.test:not(.thisClass).appendTo {
  font-size: 20px;
}

ctr('.test', {
  width: 200px
  non: {
    option: {
      key: '.thisClass'
      appendTo: '.appendTo'
    }
    font-size: 20px
  }
})

.test {
  width: 200px;
}
.test:not(.thisClass).appendTo {
  font-size: 20px;
}

.test:
  width: 200px
  non:
    option:
      key: .thisClass
      appendTo: .appendTo
    font-size: 20px

Notes

• The appendTo property differs from the applyTo property in that there is no space between the <identifier> and the appendTo value
  • appendTo <identifier><appendTo>
  • applyTo <identifier> <applyTo>

Override¶

Description: The override option property overrides the entirety of the selector, including the <identifier>, with its value.

ctr('.test', {
  width: 200px
  non: {
    option: {
      key: '.thisClass'
      override: '#override'
    }
    font-size: 20px
  }
})

.test:
  width: 200px
  non:
    option:
      key: .thisClass
      override: '#override'
    font-size: 20px

.test {
  width: 200px;
}
#override {
  font-size: 20px;
}

ctr('.test', {
  width: 200px
  non: {
    option: {
      key: '.thisClass'
      override: '#override'
    }
    font-size: 20px
  }
})

.test {
  width: 200px;
}
#override {
  font-size: 20px;
}

.test:
  width: 200px
  non:
    option:
      key: .thisClass
      override: '#override'
    font-size: 20px

Notes

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