Key¶
Description: The key
property can be defined in the option
Object.
Edit
ctr('.test', {
width: 200px
component: {
option: {
key: 'span'
}
font-size: 1em
}
})
.test:
width: 200px
component:
option:
key: span
font-size: 1em
.test {
width: 200px;
}
.test > span {
font-size: 1em;
}
ctr('.test', {
width: 200px
component: {
option: {
key: 'span'
}
font-size: 1em
}
})
.test {
width: 200px;
}
.test > span {
font-size: 1em;
}
.test:
width: 200px
component:
option:
key: span
font-size: 1em
Selector Combinator¶
Description: The selector
<combinator>
property can be defined in the option
Object.
Edit
ctr('.test', {
width: 200px
'component-.erins': {
option: {
selector: '+'
}
font-size: 1em
}
})
.test:
width: 200px
component-.erins:
option:
selector: +
font-size: 1em
.test {
width: 200px;
}
.test + .erins {
font-size: 1em;
}
ctr('.test', {
width: 200px
'component-.erins': {
option: {
selector: '+'
}
font-size: 1em
}
})
.test {
width: 200px;
}
.test + .erins {
font-size: 1em;
}
.test:
width: 200px
component-.erins:
option:
selector: +
font-size: 1em
Notes
- Unfortunately, due to Stylus, if you want to use the comma
<combinator>
such asdiv, p
you have to use a declarative instance ofctr
appendKey¶
Description: The value of true
for the appendKey
option property appends the <identifier>
to the parent <identifier>
.
Edit
ctr('.test', {
width: 200px
component: {
option: {
key: '.appendMe'
appendKey: true
}
font-size: 1em
}
})
.test:
width: 200px
component:
option:
key: .appendMe
appendKey: true
font-size: 1em
.test {
width: 200px;
}
.test.appendMe {
font-size: 1em;
}
ctr('.test', {
width: 200px
component: {
option: {
key: '.appendMe'
appendKey: true
}
font-size: 1em
}
})
.test {
width: 200px;
}
.test.appendMe {
font-size: 1em;
}
.test:
width: 200px
component:
option:
key: .appendMe
appendKey: true
font-size: 1em
Notes
appendKey
must be defined in theoption
Object- Similar to the target
appendTo
option, instead of appending to a specific<identifier>
,appendKey
appends the<identifier>
to the parent<identifier>
appendKey Shorthand¶
Description: The appendKey
option can be applied using the shorthand hyphenated notation of component--<identifier>
or comp--<identifier>
.
Edit
ctr('.test', {
width: 200px
'component--.appendMe': {
font-size: 1em
}
})
.test:
width: 200px
component--.appendMe:
font-size: 1em
.test {
width: 200px;
}
.test.appendMe {
font-size: 1em;
}
ctr('.test', {
width: 200px
'component--.appendMe': {
font-size: 1em
}
})
.test {
width: 200px;
}
.test.appendMe {
font-size: 1em;
}
.test:
width: 200px
component--.appendMe:
font-size: 1em
Notes
- Hyphenated component notation uses a single hyphen while the
appendKey
shorthand notation uses two hyphens
appendKey Multiple¶
Description: The appendKey
option property can be used in conjunction with a List of key
values.
Edit
ctr('.test', {
width: 200px
component: {
option: {
appendKey: true
key: '.appendMe' '.please' '#beebes'
}
font-size: 2em
}
})
.test:
width: 200px
component:
option:
appendKey: true
key: [.appendMe, .please, '#beebes']
font-size: 2em
.test {
width: 200px;
}
.test.appendMe {
font-size: 2em;
}
.test.please {
font-size: 2em;
}
.test#beebes {
font-size: 2em;
}
ctr('.test', {
width: 200px
component: {
option: {
appendKey: true
key: '.appendMe' '.please' '#beebes'
}
font-size: 2em
}
})
.test {
width: 200px;
}
.test.appendMe {
font-size: 2em;
}
.test.please {
font-size: 2em;
}
.test#beebes {
font-size: 2em;
}
.test:
width: 200px
component:
option:
appendKey: true
key: [.appendMe, .please, '#beebes']
font-size: 2em
appendKey Chain¶
Description: appendKey
can be chained.
Edit
ctr('.test', {
width: 200px
components: {
'.one': {
font-size: 1em
'component-.two': {
option: {
appendKey: true
}
font-size: 2em
}
}
'.three': {
option: {
appendKey: true
}
font-size: 3em
'component-.four': {
option: {
appendKey: true
}
font-size: 4em
}
}
}
})
.test:
width: 200px
components:
.one:
font-size: 1em
component-.two:
option:
appendKey: true
font-size: 2em
.three:
option:
appendKey: true
font-size: 3em
component-.four:
option:
appendKey: true
font-size: 4em
.test {
width: 200px;
}
.test > .one {
font-size: 1em;
}
.test.three {
font-size: 3em;
}
.test > .one.two {
font-size: 2em;
}
.test.three.four {
font-size: 4em;
}
ctr('.test', {
width: 200px
components: {
'.one': {
font-size: 1em
'component-.two': {
option: {
appendKey: true
}
font-size: 2em
}
}
'.three': {
option: {
appendKey: true
}
font-size: 3em
'component-.four': {
option: {
appendKey: true
}
font-size: 4em
}
}
}
})
.test {
width: 200px;
}
.test > .one {
font-size: 1em;
}
.test.three {
font-size: 3em;
}
.test > .one.two {
font-size: 2em;
}
.test.three.four {
font-size: 4em;
}
.test:
width: 200px
components:
.one:
font-size: 1em
component-.two:
option:
appendKey: true
font-size: 2em
.three:
option:
appendKey: true
font-size: 3em
component-.four:
option:
appendKey: true
font-size: 4em