Key¶

Description: The key property can be defined in the option Object.

ctr('.test > div', {
  width: 200px
  attribute: {
    option: {
      key: '[class*="te"]'
    }
    font-size: 1.5em
  }
})

.test > div:
  width: 200px
  attribute:
    option:
      key: '[class*="te"]'
    font-size: 1.5em

.test > div {
  width: 200px;
}
.test > div[class*="te"] {
  font-size: 1.5em;
}

ctr('.test > div', {
  width: 200px
  attribute: {
    option: {
      key: '[class*="te"]'
    }
    font-size: 1.5em
  }
})

.test > div {
  width: 200px;
}
.test > div[class*="te"] {
  font-size: 1.5em;
}

.test > div:
  width: 200px
  attribute:
    option:
      key: '[class*="te"]'
    font-size: 1.5em

Attribute Value¶

Description: The attribute value can be defined through the value property in the option Object.

ctr('.test > div', {
  width: 200px
  attribute: {
    option: {
      key: 'class*'
      value: 'te'
    }
    font-size: 2em
  }
})

.test > div:
  width: 200px
  attribute:
    option:
      key: class*
      value: te
    font-size: 2em

.test > div {
  width: 200px;
}
.test > div[class*="te"] {
  font-size: 2em;
}

ctr('.test > div', {
  width: 200px
  attribute: {
    option: {
      key: 'class*'
      value: 'te'
    }
    font-size: 2em
  }
})

.test > div {
  width: 200px;
}
.test > div[class*="te"] {
  font-size: 2em;
}

.test > div:
  width: 200px
  attribute:
    option:
      key: class*
      value: te
    font-size: 2em

Notes

• This is kinda silly, but, when in Rome
• value is stringified if it is a Stylus Literal