ctrSetOption

Description: The ctrSetOption Stylus invocation sets global ctr options.

Parameters

Arguments

Example

Edit
ctrSetOption({
hover: {
duration: 2s
delay: 0.5s
ease: 'ease-in'
}
})
ctr('.test', {
hover: {
on: {
width: 400px
}
non: {
width: 200px
}
}
})
ctr:::setOption:
hover:
duration: 2s
delay: 0.5s
ease: ease-in
.test:
hover:
on:
width: 400px
non:
width: 200px
.test:hover {
width: 400px;
transition-delay: 0.5s;
transition-duration: 2s;
transition-property: width;
transition-timing-function: ease-in;
}
.test:not(:hover) {
width: 200px;
transition-delay: 0.5s;
transition-duration: 2s;
transition-property: width;
transition-timing-function: ease-in;
}
ctrSetOption({
  hover: {
    duration: 2s
    delay: 0.5s
    ease: 'ease-in'
  }
})

ctr('.test', {
  hover: {
    on: {
      width: 400px
    }
    non: {
      width: 200px
    }
  }
})
.test:hover {
  width: 400px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: width;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  width: 200px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: width;
  transition-timing-function: ease-in;
}
ctr:::setOption:
  hover:
    duration: 2s
    delay: 0.5s
    ease: ease-in

.test:
  hover:
    on:
      width: 400px
    non:
      width: 200px

Notes

ctrSetVariable

Description: The ctrSetVariable Stylus invocation sets global ctr variables.

Parameters

Arguments

Example

Edit
ctrSetVariable({
red: #c0392b
white: #ecf0f1
})
ctr('.test', {
width: 200px
color: '$white$'
background: '$red$'
})
ctr:::setVariable:
red: '#c0392b'
white: '#ecf0f1'
.test:
width: 200px
color: $white$
background: $red$
.test {
width: 200px;
color: #ecf0f1;
background: #c0392b;
}
ctrSetVariable({
  red: #c0392b
  white: #ecf0f1
})

ctr('.test', {
  width: 200px
  color: '$white$'
  background: '$red$'
})
.test {
  width: 200px;
  color: #ecf0f1;
  background: #c0392b;
}
ctr:::setVariable:
  red: '#c0392b'
  white: '#ecf0f1'

.test:
  width: 200px
  color: $white$
  background: $red$

Notes

ctrSetReset

Description: The ctrSetReset Stylus invocation resets all values set by other “set” invocations.

Parameters

Arguments

Notes

ctrReset

Description: The ctrReset Stylus invocation resets everything.

Parameters

Arguments

Notes