Syntax

Description: ctr is defined as a self-invoking Function that provides syntactical abstraction over CSS.

ctr('<#selector>', {
// key: value
<...>: <...>
})
<#selector>:
# key: value
<...>: <...>
<#selector> {
<...>: <...>;
}

Notes

Basic

Description: A ctr instance creates valid CSS for the <#selector> from its second Object argument whose data is naked.

Edit
ctr('.test', {
width: 200px
'height': '200px'
future-property: 100%
})
.test:
width: 200px
height: 200px
future-property: 100%
.test {
width: 200px;
height: 200px;
future-property: 100%;
}
ctr('.test', {
  width: 200px
  'height': '200px'
  future-property: 100%
})
.test {
  width: 200px;
  height: 200px;
  future-property: 100%;
}
.test:
  width: 200px
  height: 200px
  future-property: 100%

Notes

Comments

Description: A single-line, two slashes //, Stylus comment can be used in a ctr instance.

Edit
ctr('.test', {
width: 200px
// the font-size
font-size: 20px
// multi line
// comment
})
.test:
width: 200px
# the font-size
font-size: 20px
# multi line
# comment
.test {
width: 200px;
font-size: 20px;
}
ctr('.test', {
  width: 200px
  // the font-size
  font-size: 20px
  // multi line
  // comment
})
.test {
  width: 200px;
  font-size: 20px;
}
.test:
  width: 200px
  # the font-size
  font-size: 20px
  # multi line
  # comment

Notes

Multiple values

Description: Properties can have multiple values.

Edit
ctr('.test', {
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.75)
text-shadow: 2px 1px 2px rgba(150, 150, 150, 0.9)
})
.test:
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.75)
text-shadow: 2px 1px 2px rgba(150, 150, 150, 0.9)
.test {
box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
text-shadow: 2px 1px 2px rgba(150,150,150,0.9);
}
ctr('.test', {
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.75)
  text-shadow: 2px 1px 2px rgba(150, 150, 150, 0.9)
})
.test {
  box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
  text-shadow: 2px 1px 2px rgba(150,150,150,0.9);
}
.test:
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.75)
  text-shadow: 2px 1px 2px rgba(150, 150, 150, 0.9)
Edit
// String wrapped properties
ctr('.test', {
box-shadow: '0px 3px 8px 1px rgba(0,0,0,0.75)'
text-shadow: '2px 1px 2px rgba(150, 150, 150, 0.9)'
})
# String wrapped properties
.test:
box-shadow: '0px 3px 8px 1px rgba(0,0,0,0.75)'
text-shadow: '2px 1px 2px rgba(150, 150, 150, 0.9)'
.test {
box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
text-shadow: 2px 1px 2px rgba(150,150,150,0.9);
}
// String wrapped properties
ctr('.test', {
  box-shadow: '0px 3px 8px 1px rgba(0,0,0,0.75)'
  text-shadow: '2px 1px 2px rgba(150, 150, 150, 0.9)'
})
.test {
  box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
  text-shadow: 2px 1px 2px rgba(150,150,150,0.9);
}
# String wrapped properties
.test:
  box-shadow: '0px 3px 8px 1px rgba(0,0,0,0.75)'
  text-shadow: '2px 1px 2px rgba(150, 150, 150, 0.9)'

Notes

Multiple Separate Values

Description: Multiple values separated by commas can be used although the value must be in a String format.

Edit
ctr('.test', {
box-shadow: '3.3em 0em rgba(255, 0, 0, 0.1), 5.71188em 1.00716em rgba(255, 43, 0, 0.6), 5.45022em 1.98372em rgba(255, 85, 0, 0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255, 170, 0, 0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255, 255, 0, 0.7), 1.98372em 5.45022em rgba(213, 255, 0, 0.8)'
})
.test:
box-shadow: '3.3em 0em rgba(255, 0, 0, 0.1), 5.71188em 1.00716em rgba(255, 43, 0, 0.6), 5.45022em 1.98372em rgba(255, 85, 0, 0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255, 170, 0, 0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255, 255, 0, 0.7), 1.98372em 5.45022em rgba(213, 255, 0, 0.8)'
.test {
box-shadow: 3.3em 0em rgba(255,0,0,0.1), 5.71188em 1.00716em rgba(255,43,0,0.6), 5.45022em 1.98372em rgba(255,85,0,0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255,170,0,0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255,255,0,0.7), 1.98372em 5.45022em rgba(213,255,0,0.8);
}
ctr('.test', {
  box-shadow: '3.3em 0em rgba(255, 0, 0, 0.1), 5.71188em 1.00716em rgba(255, 43, 0, 0.6), 5.45022em 1.98372em rgba(255, 85, 0, 0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255, 170, 0, 0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255, 255, 0, 0.7), 1.98372em 5.45022em rgba(213, 255, 0, 0.8)'
})
.test {
  box-shadow: 3.3em 0em rgba(255,0,0,0.1), 5.71188em 1.00716em rgba(255,43,0,0.6), 5.45022em 1.98372em rgba(255,85,0,0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255,170,0,0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255,255,0,0.7), 1.98372em 5.45022em rgba(213,255,0,0.8);
}
.test:
  box-shadow: '3.3em 0em rgba(255, 0, 0, 0.1), 5.71188em 1.00716em rgba(255, 43, 0, 0.6), 5.45022em 1.98372em rgba(255, 85, 0, 0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255, 170, 0, 0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255, 255, 0, 0.7), 1.98372em 5.45022em rgba(213, 255, 0, 0.8)'

Notes

Stylus Variables

Description: Stylus variables can be used in a ctr instance.

Edit
$font-size = 14px
ctr('.test', {
width: 200px
font-size: $font-size
})
# Technically, not a "Stylus" variable,
# but YAML also has a pseudo global variable scope
$$:
font-size: 14px
.test:
width: 200px
font-size: $font-size$
.test {
width: 200px;
font-size: 14px;
}
$font-size = 14px

ctr('.test', {
  width: 200px
  font-size: $font-size
})
.test {
  width: 200px;
  font-size: 14px;
}
# Technically, not a "Stylus" variable,
# but YAML also has a pseudo global variable scope
$$:
  font-size: 14px

.test:
  width: 200px
  font-size: $font-size$

Notes

Built-In Functions

Description: All relevant Stylus built-in functions can be used in a ctr instance.

Edit
ctr('.test', {
width: 200px
top: unit(sin(3*PI/4), 'em')
color: alpha(cornflowerblue, 0.5)
background: transparentify(green, red, 0.5)
})
.test:
width: 200px
top: unit(sin(3*PI/4), em)
color: alpha(cornflowerblue, 0.5)
background: transparentify(green, red, 0.5)
.test {
width: 200px;
top: 0.707106781em;
color: rgba(100,149,237,0.5);
background: rgba(0,255,0,0.5);
}
ctr('.test', {
  width: 200px
  top: unit(sin(3*PI/4), 'em')
  color: alpha(cornflowerblue, 0.5)
  background: transparentify(green, red, 0.5)
})
.test {
  width: 200px;
  top: 0.707106781em;
  color: rgba(100,149,237,0.5);
  background: rgba(0,255,0,0.5);
}
.test:
  width: 200px
  top: unit(sin(3*PI/4), em)
  color: alpha(cornflowerblue, 0.5)
  background: transparentify(green, red, 0.5)

Notes

Iteration

Description: Stylus iteration can be used with ctr instances.

Edit
$font-size-1 = 1em
$font-size-2 = 2em
$font-size-3 = 3em
for i in 1..3
ctr('.test' + i, {
width: 200px
font-size: lookup('$font-size-' + i)
})
.test1 {
width: 200px;
font-size: 1em;
}
.test2 {
width: 200px;
font-size: 2em;
}
.test3 {
width: 200px;
font-size: 3em;
}
$font-size-1 = 1em
$font-size-2 = 2em
$font-size-3 = 3em

for i in 1..3
  ctr('.test' + i, {
    width: 200px
    font-size: lookup('$font-size-' + i)
  })
.test1 {
  width: 200px;
  font-size: 1em;
}
.test2 {
  width: 200px;
  font-size: 2em;
}
.test3 {
  width: 200px;
  font-size: 3em;
}

Notes